We Keep Coding

Using Html.BeginForm and ajax call same action conflict?

When I try to add Ajax to pass another data into my action controller my model parameter was affected the value was null and my Ajax parameter has a value. I do not think it is because I am using Html.beginform('index', 'payable') and I used Ajax url: '#Url.Action("index", "payable")', with the same ActionResult.
You can see the reference below.
#using (Html.BeginForm("index", "payable", FormMethod.Post, new { enctype = "multipart/form-data" }))<div class="col-md-2">
<div class="form-group">
#Html.LabelFor(x => x.Amount, new { #class = "form-label" })
#Html.TextBoxFor(x => x.Amount, new { #class = "form-control" })
</div>
</div>
<div class="col-md-2">
<div class="form-group">
#Html.LabelFor(x => x.ImagePath, new { #class = "form-label" })
<input type="file" name="file" id="files" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<button type="submit" id="btnUpload" class="btn btn-primary btn-sm" onclick="saveSelected()"><i class="fas fa-save"></i> Submit Payment</button>
</div>
</div>{
My Ajax
function saveSelected() {
$.ajax({
url: '#Url.Action("index", "payable")',
type: 'POST',
data: { ids: ids },
traditional: true,
success: function (data) {
alert("success");
}
});
}
My Controller
public ActionResult Index(PayableFormModel model, HttpPostedFileBase file, int[] ids)
{
return View();
}

Html.Beginform and ajax cannot use at same time,even you add a
onclick function. So the ajax won't work and all data are submitted
by form. If you want to submit model and any other data, put all them into form or only use ajax.
When you upload file, model cannot get file's name or path directly. You should store file into a folder or directory,then assign this path to model's imagepath.(Examle code is blew)
In index page, {} should follow using(), otherwise it will report error.
public ActionResult Index(PayableFormModel model,HttpPostedFileBase file,int[] ids)
{
string filepath = Server.MapPath("~/image/");
Directory.CreateDirectory(filepath);
file.SaveAs(Path.Combine(filepath, file.FileName));
model.ImagePath = filepath + file.FileName ;
return View();
}

How to create a List<> hidden field and submit it to controller in MVC

I need to post back the items that the user added in the DevExpress ListBox, but, according to the company, the way to do it is to store the items in a hidden field and then submit it. I need to know how to create this hidden field, in the view, which, I believe, needs to be a List with Text and Value, (similar to the model passed) and then how to assign the values to it in jquery.
Notes:
1. The question is not how to create a hidden field, but that specific type.
2. The way it is now, in the controller, the model comes back as null.
// This code is located in the Index.cshtml page
<div id="modalMain" class="modal fade hidden-print" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="padding-bottom:0;padding-top:0">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div id="modalMainData" class="modal-body" style=" padding: 0 10px 0 10px !important;">
</div>
</div>
</div>
</div>
// This code is located on ListBoxItemsModal.cshtml
#model List<ValueText>
#using (Html.BeginForm("", "", FormMethod.Post, new { #id = "formPostListBoxItems" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class=" form-group">
#Html.Label("New Item text")
<div class="input-group">
#Html.TextBox("name", null, new { #id = "txtNewListBoxItem" })
<span class="input-group-btn">
<button id="btnAddListBoxItem" type="button" class="btn btn-default btn-xs">Add Item</button>
</span>
</div>
</div>
#Html.DevExpress().ListBox(settings =>
{
settings.Name = "ListBoxCarMake";
settings.Properties.EnableClientSideAPI = true;
settings.Properties.ValueField = "Value";
settings.Properties.ValueType = typeof(string);
settings.Properties.TextField = "Text";
}).BindList(Model).GetHtml()
}
// Add a new item to list box
$(document).on("click", "#btnAddListBoxItem", function () { s = $("#txtNewListBoxItem").val(); ListBoxCarMake.AddItem(s); });
$(document).on("click", "#btnPostListBoxItems", function (e) {
e.preventDefault();
err = '';
$.ajax({
url: '#Url.Action(("PostListBoxItems", "System")',
cache: false,
type: "POST",
data: $("#formPostListBoxItems").serialize(),
success: function (data) { $("#modalMainData").html(data); },
error: function (xhr, status, exception) { DisplayAjaxError(xhr, status, exception); }
});
});
// CONTROLLER
public ActionResult GetListOptions()
{
var model = new List<ValueText>();
model.Add(new ValueText() { Text = "AUDI", Value = "AUDI" });
model.Add(new ValueText() { Text = "BMW", Value = "BMW" });
model.Add(new ValueText() { Text = "VW", Value = "VW" });
return PartialView("~/Views/System/ListBoxItemsModal.cshtml", model);
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult PostListBoxItems(List<ValueText> list)
{
return PartialView("~/Views/System/ListBoxItemsModal.cshtml", list);
}

#for (int i = 0; i < Model.Count; i++)
{
#Html.HiddenFor(modelitem => Model[i].Text)
#Html.HiddenFor(modelitem => Model[i].Value)
}

I suggest you to create a ListContainer and append its elements to your html as hidden inputs. This way, when the submit button is pressed, the values will go to the controller.

AjaxForms: Some working some not

This is how my view looks like currently.
#model DatePicker.Models.ViewModels.Appointment.CreateAppointmentSelectPersons
#{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
<link href="~/Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>
}
#*Main Form*#
#using(Ajax.BeginForm("Create","Appointment", new AjaxOptions{HttpMethod = "POST"}))
{
#Html.AntiForgeryToken()
<h4>Step 2</h4>
<hr />
#Html.ValidationSummary()
#Html.HiddenFor(m=>m.AppointmentId)
#*Child Form1*#
using (Ajax.BeginForm("AddAttendeeManual", "Attendee", new AjaxOptions { HttpMethod = "POST", OnSuccess = "doneSuperOffice" }))
{
#Html.HiddenFor(m=>m.SelectedManualEmail.AppointmentId)
<div class="form-group">
#Html.LabelFor(m => m.SelectedManualEmail.Email, new { #class = "col-md-2 control-label" })
<div class="col-md-8 input-group">
#Html.TextBoxFor(m => m.SelectedManualEmail.Email, new { id = "Email", #class = "form-control",PlaceHolder="Email"})
<input type='submit' id="btnEmail" class="btn btn-default" value="Add>>" />
</div>
</div>
}
if (Model.IsSuperOfficeConnected)
{
#*Child Form 2*#
using (Ajax.BeginForm("AddAttendeeSuperOffice","Attendee",new AjaxOptions{HttpMethod = "POST", OnSuccess = "doneManualEmail"}))
{
#Html.HiddenFor(m => m.SelectedSuperOfficeEmail.FirstName, new { id = "SelectedSuperOfficeEmail_FirstName" })
#Html.HiddenFor(m => m.SelectedSuperOfficeEmail.LastName, new { id = "SelectedSuperOfficeEmail_LastName" })
#Html.HiddenFor(m=>m.SelectedSuperOfficeEmail.AppointmentId)
#Html.HiddenFor(m => m.SelectedSuperOfficeEmail.SuperOfficePersonId, new { id = "SelectedSuperOfficeEmail_SuperOfficePersonId" })
<div class="form-group">
#Html.LabelFor(m => m.SelectedSuperOfficeEmail.Email, new { #class = "col-md-2 control-label" })
<div class="col-md-8 input-group">
#Html.TextBoxFor(m => m.SelectedSuperOfficeEmail.Email, new { id = "SelectedSuperOfficeEmail", #class = "form-control", PlaceHolder = "Search in SuperOffice" })
<input type='submit' id="btnSuperOffice" class="btn btn-default" value="Add>>" />
</div>
</div>
}
}
if (Model.IsInternalAddressBookEmpty)
{
#*Child Form3*#
using (Ajax.BeginForm("AddAttendeeInternalAddressBook", "Attendee", new AjaxOptions { HttpMethod = "POST", OnSuccess = "doneInternalAddressbook" }))
{
#Html.HiddenFor(m=>m.SelectedAddressBookPerson.FirstName)
#Html.HiddenFor(m=>m.SelectedAddressBookPerson.LastName)
#Html.HiddenFor(m=>m.SelectedAddressBookPerson.AppointmentId)
<div class="form-group">
#Html.LabelFor(m => m.SelectedAddressBookPerson.Email, new { #class = "col-md-2 control-label" })
<div class="col-md-8 input-group">
#Html.TextBoxFor(m => m.SelectedAddressBookPerson.Email, new { id = "SelectedAddressBookPerson", #class = "form-control", PlaceHolder = "Search in AddressBook..." })
<input type='submit' id="btnAddressBook" class="btn btn-default" value="Add>>">
</div>
</div>
}
}
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-default" value="<<Previous"/>
<input type="submit" class="btn btn-default" value="Next>>" />
</div>
</div>
}
<style>
.ui-autocomplete-loading {
background: url('/Content/themes/base/images/ui-anim_basic_16x16.gif') no-repeat right center;
}
</style>
#section Scripts{
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/Scripts/jquery-ui-1.10.4.min.js")
#Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
<script type="text/javascript">
$(function () {
$("#SelectedSuperOfficeEmail").
autocomplete({
source: '/Appointment/SuperOfficePerson',
minLength: 1,
select: function (event, ui) {
$('#SelectedSuperOfficeEmail').val(ui.item.value);
$(#Html.IdFor(m => m.SelectedSuperOfficeEmail.FirstName)).val(ui.item.FirstName);
$(#Html.IdFor(m => m.SelectedSuperOfficeEmail.LastName)).val(ui.item.LastName);
$(#Html.IdFor(m => m.SelectedSuperOfficeEmail.SuperOfficePersonId)).val(ui.item.ExternalPersonId);
}
});
$("#SelectedAddressBookPerson").autocomplete({
source: '/Appointment/AddressBookPerson',
minLength: 1,
select: function(event,ui) {
$(#Html.IdFor((m=>m.SelectedAddressBookPerson.FirstName))).val(ui.item.FirstName);
$(#Html.IdFor(m=>m.SelectedAddressBookPerson.LastName)).val(ui.item.LastName);
},
});
});
function doneManualEmail() {
$("#Email").val('');
}
function doneSuperOffice() {
$("#SelectedSuperOfficeEmail").val('');
}
function doneInternalAddressBook() {
$("#SelectedAddressBookPerson").val('');
}
</script>
}
And the controller:
[HttpPost]
public void AddAttendeeSuperOffice(CreateAppointmentSelectPersons superOfficePerson)
{
_attendeeRepository.AddSuperOfficeAttende(superOfficePerson.SelectedSuperOfficeEmail.AppointmentId,
superOfficePerson.SelectedSuperOfficeEmail.FirstName,
superOfficePerson.SelectedSuperOfficeEmail.LastName,
superOfficePerson.SelectedSuperOfficeEmail.Email,
superOfficePerson.SelectedSuperOfficeEmail.SuperOfficePersonId);
}
[HttpPost]
public void AddAttendeeInternalAddressBook(CreateAppointmentSelectPersons internalAddressbookPerson)
{
_attendeeRepository.AddInternalAddressBookAttendee(
internalAddressbookPerson.SelectedAddressBookPerson.AppointmentId,
internalAddressbookPerson.SelectedAddressBookPerson.FirstName,
internalAddressbookPerson.SelectedAddressBookPerson.LastName,
internalAddressbookPerson.SelectedAddressBookPerson.Email);
}
[HttpPost]
public void AddAttendeeManual(CreateAppointmentSelectPersons manualEmail)
{
_attendeeRepository.AddManualAttendee(manualEmail.SelectedManualEmail.AppointmentId,
manualEmail.SelectedManualEmail.Email);
}
Here, Child Form2works perfectly, it calls my controller when button is clicked and OnSuccess textbox gets empty, exactly as I wanted.
Problem1: For the Child Form3 it calls the controller but OnSuccess, doesn't make the textbox empty.
Problem2: For the Child Form1 it doesn't call my controller at all, nothing happens when i click the button

For starters, you may want to either create a done() function for each of those forms, or pass it which form has completed (unless every form, after it's been executed, does the same thing). e.g.
#* Child Form 1 *#
new AjaxOptions { ... OnSuccess = "form1Done()" ... }
#* Child Form 2 *#
new AjaxOptions { ... OnSuccess = "form2Done()" ... }
#* Child Form 3 *#
new AjaxOptions { ... OnSuccess = "form3Done()" ... }
~OR~
#* Child Form 1 *#
new AjaxOptions { ... OnSuccess = "done(1)" ... }
#* Child Form 2 *#
new AjaxOptions { ... OnSuccess = "done(2)" ... }
#* Child Form 3 *#
new AjaxOptions { ... OnSuccess = "done(3)" ... }
Secondly, There are more options than OnSuccess for the AjaxOptions method. It may make sense (at least while debugging) to add methods to OnFailure or OnSuccess so you can get more insight as to what's happening. Also, make use of the debugger within your browser and see if the calls are being executed.
For now, there's not enough information to solve your issue, but hopefully you'll either end up solving it by using the above, or get more information to update the question with.
If you do end up updating the question, please leave a comment on this answer and I'll do my best to help.

Render PartialView within View on Demand

the page has 2 DropDownLists + a Textbox + a Submit Button.
On Submit it's supposed to choose and fill a partial view depending on what value is selected in the first DropDownList. I got it somewhat working; however, it will always return the pv in a new window instead of rendering it in the main view's div.
I am using MVC 3 + Telerik.
The most Important parts of the code:
VIEW - Updated
<script type="text/javascript">
function onMainDDL1Change(e) {
var combo = $("#SubDDL1").data("tComboBox");
combo.value("");
combo.reload();
}
function onSubDDL1DataBinding(e) {
var combo = $("#MainDDL1").data("tComboBox");
e.data = $.extend({}, e.data, { mainDDL1ID: combo.value() });
}
</script>
#using (Ajax.BeginForm("PartialGrid", "DataSearch", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "result", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace }))
{
<table>
<tr>
<td>
#(Html.Telerik().ComboBox()
.Name("MainDDL1")
.AutoFill(true)
.DataBinding(binding => binding.Ajax().Select("LoadMainDDL", "DataSearch"))
.HighlightFirstMatch(true)
.ClientEvents(events => events.OnChange("onMainDDL1Change"))
)
</td>
</tr>
<tr>
<td>
#(Html.Telerik().ComboBox()
.Name("SubDDL1")
.DataBinding(binding => binding.Ajax().Select("LoadSubDDL1", "DataSearch"))
.HighlightFirstMatch(true)
.ClientEvents(events => events.OnDataBinding("onSubDDL1DataBinding"))
)
</td>
<tr>
<td>
#Html.TextBoxFor(o => o.sSearch1)
</td>
</tr>
<tr align="center">
<td colspan="4">
<input type="submit" class="t-button" value="Search" name="submit" />
</td>
</tr>
</table>
}
<div id="result">
</div>
Controller - Updated
[HttpPost]
//PartialView
public PartialViewResult PartialGrid(DataSearchModel voModel)
{
voModel.dtResultSet1 = DLA.DataSearchContext.getResultSet1(voModel.MainDDL1, voModel.SubDDL1, voModel.sSearch1);
return PartialView("_TPRCL", voModel);
}
//Initial View
public ViewResult DataSearch(string text)
{
DataSearchModel oModel = new DataSearchModel();
oModel.alMainDDL = DLA.DataSearchContext.getMainDDL();
return View(oModel);
}
PartialView
#model ISC.Utilities.GISTransactionTools.Models.DataSearchModel
#(Html.Telerik().Grid(Model.dtResultSet1)
.Name("Grid")
.Footer(false)
.Columns(columns =>
{
columns.Bound(o => o.Row[0]).Title("T_PRCL");
}))
PartialView Grid has actually more columns, this is just to make it work.

I am not using Telerik, but here is how I am doing something similar:
In the initial view I have the following code:
#using (Ajax.BeginForm("PhoneForm", "Home", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "form-lead", InsertionMode = InsertionMode.Replace, OnSuccess = "HookupValidation" })) {
#Html.ValidationSummary(false, "Please address the following items:")
<div class="phone">
<div class="field">
#Html.LabelFor(model => model.Phone1)
#Html.EditorFor(model => model.Phone1)
#Html.ValidationMessageFor(model => model.Phone1)
</div>
<div class="button">
<input type="submit" value="Get Customer" name="submit" /></div>
</div>
}
<div id="form-lead">
</div>
Basically, when the "Get Customer" button is clicked, it will call, via AJAX, the "PhoneForm" method in my "Home" controller. This method generates the partial view which is then inserted (InsertionMode = InsertionMode.Replace) into the (UpdateTargetId = "form-lead"). The OnSuccess function is just to be sure that client side validation and jQuery events are hooked up on the partial view. If you don't do this, none of the client side validation or script will work for items in the partial view.
The controller code for "PhoneForm" is as follows:
[HttpPost]
public PartialViewResult PhoneForm(string Phone1) {
HomeViewModel viewModel = new HomeViewModel();
// ... get data and set up view model here ... //
// ... also choose which partial view you want to return ... //
return PartialView("LeadInfoPartial", viewModel);
}
Hope this helps you solve your issue.

Alright got it to work in Javascript.
View
<script type="text/javascript"> $('#btnSubmit').click(function () {
var time = new Date().getTime(); // #* unique random number to workaround IE cache issue - IE will cache the ajax if you
don't use this *#
var oMainDDL1 = $('#MainDDL1').data("tComboBox");
var oSubDDL1 = $('#SubDDL1').data("tComboBox");
var sSearch1 = $("#Search1").val();
var actionURL = '#Url.Action("getGrid1", "DataSearch", new { MainDDL1
= "PLACEHOLDER" })'.replace('PLACEHOLDER', oMainDDL1.value()) + "&SubDDL1=" + oSubDDL1.value() + "&Search1=" + sSearch1 + "&time=" +
time;
if (actionURL != null) {
$.get(actionURL, function (data) {
$('#result1').fadeOut('slow', 'linear', function () { $('#result1').empty(); $('#result1').append(data); });
$('#result1').fadeIn('slow', 'linear', function () {
if ($.browser.msie) {
this.style.removeAttribute('filter'); // #* Needed to fix IE7 cleartype bug with jQuery fade, but will crap out
on FF/Chrome *#
}
});
});
}
});
}); </script>
#(Html.Telerik().ComboBox()
.Name("MainDDL1")
.AutoFill(true)
.DataBinding(binding => binding.Ajax().Select("LoadMainDDL", "DataSearch"))
.HighlightFirstMatch(true)
.ClientEvents(events => events.OnChange("onMainDDL1Change"))
)
#(Html.Telerik().ComboBox()
.Name("SubDDL1")
.DataBinding(binding => binding.Ajax().Select("LoadSubDDL1", "DataSearch"))
.HighlightFirstMatch(true)
.ClientEvents(events => events.OnDataBinding("onSubDDL1DataBinding"))
)
#Html.TextBox("Search1")
<input type="button" class="t-button button1" value="Search"
id="btnSubmit" />
<div id="result1"> </div>
Controller
public PartialViewResult getGrid1(string MainDDL1, string SubDDL1, string Search1)
{
DataSearchModel voModel = new DataSearchModel();
voModel.dtResultSet1 = DLA.DataSearchContext.getResultSet1(MainDDL1, SubDDL1, Search1);
return PartialView(MainDDL1, voModel);
}
public ViewResult DataSearch(string text)
{
DataSearchModel oModel = new DataSearchModel();
oModel.alMainDDL = DLA.DataSearchContext.getMainDDL();
return View(oModel);
}

#Html.RenderAction with Ajax Form ASP.NET Mvc3 c#

I have a scenario where i need some code setup when a control renders. I have a widget that'll be used on a number of pages called a QuickRate:
I'm trying to call it like so in my cshtml file:
<div class="dragbox" id="quick-rate">
<h2>Retrieve a Quick Rate</h2>
#Html.Action("Create", "QuickRate")
</div>
and then in the create on the QuickRateController.cs I have:
public ActionResult Create()
{
var model = new QuickRateModel();
model.Products = currentUser.GetProducts(dataRepository).ToSelectList(p => p.ProductId, p => p.ProductName);
return View("QuickRateResult", model);
}
i then have a QuickRatePartial.cshtml file that contains the following:
#model Project.Web.Models.QuickRateModel
#{
Layout = "";
AjaxOptions options = new AjaxOptions()
{
HttpMethod = "Post",
UpdateTargetId = "quick-rate-content"
};
}
<div class="clearfix">
#using (Ajax.BeginForm("GetQuickRate", "QuickRate", null, options, new { #id="quick-rate-form" }))
{
<fieldset>
#Html.DropDownListFor(model => model.ProductId, Model.Products)
#Html.ValidationMessageFor(model => model.ProductId)
<select data-val="true" name="DropDown1" data-bind="
options: Items1,
optionsText :'ItemName',
value: SelectedName
">
</select>
<select data-val="true" name="DropDown2" id="DropDown2" data-val-required="Please select an Item." data-bind="
options: SelectedItem().MoreItems,
optionsText: 'Text',
optionsValue: 'Text',
value: MoreItem,
optionsCaption: 'Select One'
"></select>
<div class="clearfix">
#Html.ValidationMessageFor(model => model.MoreItems)
</div>
<div>
<input type="submit" value="Get Quick Rate" />
</div>
<div id="quick-rate-content"></div>
</fieldset>
}
</div>
try as i might I can't get the form to render at all.. just wondering if you had any suggestions?
Cheers!

You've named the file quickratepartial.cshtml but in the action you are looking for a view called quickrateresult. Is this correct?