ASP MVC 3: LoadingElementId element only shows on first request - asp.net-mvc

I have the following problem. I am using an AjaxForm in ASP MVC 3 and the LoadingElementId works fine only in the first request, it is not shown on the next ones. Why can this be happening?
View:
#model ICollection<Indirect_eSod.ViewModels.OrderSearchViewModel>
#using Indirect_eSod.Helpers
#{
ViewBag.Title = "Sales Order Lookup";
}
<script type="text/javascript">
$(document).ready(function () {
$("#id").keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g, '');
});
});
</script>
#using ( Ajax.BeginForm(new AjaxOptions()
{
HttpMethod = "GET",
UpdateTargetId = "results",
LoadingElementId = "ajaxSplash",
InsertionMode = InsertionMode.Replace
}))
{
<div id="Criteria" style="width: 800px;margin-left:10%">
<table id="tblSearchCriteria" class="FunnyRedLine" width="100%">
<tr class="SODRow">
<td class="SODLabel">
eSod ID:
</td>
<td colspan="4">
#Html.TextBox("id", null, new { #class = "Text"})
</td>
<td style="width: 40%"></td>
</tr>
<tr class="SODRow">
<td class="SODLabel">
Start Date:
</td>
<td>
#Html.TextBox("startDate", null, new { #class = "Text", #readonly="readonly" })
#Ajax.Calendar("startDate")
</td>
<td class="SODSpacer75px">
</td>
<td class="SODLabel">
End Date:
</td>
<td>
#Html.TextBox("endDate", null, new { #class = "Text", #readonly = "readonly" })
#Ajax.Calendar("endDate")
</td>
<td style="width: 40%"></td>
</tr>
<tr class="SODRow">
<td class="SODLabel">
Post Code:
</td>
<td colspan="4">
#Html.TextBox("postCode", null, new { #class = "Text" })
</td>
</tr>
<tr class="SODRow">
<td class="SODLabel">
Sales Person:
</td>
<td colspan="4">
#Html.DropDownList("salesPersonId", new SelectList(ViewBag.SalesPeople, "UserId", "FullName"), String.Empty, new { #class = "Text" })
</td>
<td style="width: 40%">
</td>
</tr>
<tr class="SODRow">
<td class="SODLabel">
Sales Person Ref:
</td>
<td colspan="4">
#Html.TextBox("salesPersonRef", null, new { #class = "Text" })
</td>
</tr>
<tr class="SODRow">
<td class="SODLabel">
Order Type:
</td>
<td colspan="4">
#Html.DropDownList("orderTypeId", new SelectList(ViewBag.OrderTypes, "SodTypeID", "SodTypeDesc"), String.Empty, new { #class = "Text" })
</td>
</tr>
<tr class="SODRow">
<td class="SODLabel">
Serial No:
</td>
<td colspan="4">
#Html.TextBox("serialNo", null, new { #class = "Text" })
</td>
</tr>
<tr class="SODRow">
<td class="SODLabel">
Customer PO:
</td>
<td colspan="4">
#Html.TextBox("customerPO", null, new { #class = "Text" })
</td>
<td style="width: 40%">
<input id="btnSearch" type="submit" value="Search" class="Text" />
#Html.Hidden("hdnNoCache",#DateTime.Now)
</td>
</tr>
</table>
</div>
}
<div id="results" />
#Html.Partial("AjaxSplash")
The AjaxSplash Source
<div id="ajaxSplash" style="display:none;z-index:60;" class="transparent">
<table id="Table1" width="100%" style="height: 100%; text-align: center">
<tr align="center">
<td align="center" valign="middle">
<img alt="" src="/Content/Images/ajax-loader2.gif" id="img2" />
</td>
</tr>
<tr align="center">
<td align="center" style="font-family: Verdana; font-size: 8pt; font-weight: bold;
color: Navy;">
Please Wait..
</td>
</tr>
</table>
</div>
The Controller
[Ajax(true)]
[CacheControl(HttpCacheability.NoCache),HttpGet]
public ActionResult Index(string id, string startDate, string endDate, string postCode, string salesPersonId, string salesPersonRef,
string orderTypeId, string serialNo, string customerPO)
{
var service = new eSodSrv();
var viewModel = service.GetHeaders(id.ToInt32(), salesPersonId.ToInt32(), orderTypeId.ToInt32(), startDate.ToDate(), endDate.ToDate(), postCode, customerPO, serialNo, salesPersonRef);
return PartialView("SearchResults",viewModel);
}
EDIT
I think I've tracked what the problem is. After the AJAX call when I make a document.getElementById('ajaxSplash') I get null. I still have no idea why this is happening though

I actually prefer not to do it this way and instead in my layout define a div and attach
$('#waitImageDiv')
.hide()
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
ANY ajax events will automatically show this image then automatically.

OK I found the solution, it seems that LoadingElementId will only work if the div is inside the AJAX Form, otherwise the div will end up as a null after the first call.

It looks like the loading element div must be the first element in the ajax form for the feature to work properly.
Try the following:
#using ( Ajax.BeginForm(new AjaxOptions()
{
HttpMethod = "GET",
UpdateTargetId = "results",
LoadingElementId = "ajaxSplash",
InsertionMode = InsertionMode.Replace
}))
{
#Html.Partial("AjaxSplash")
....

Related

I have a problem when I try to render a partial view in may main view

I have the following partial view:
#model IDECOHealthInsurance.Models.Pharmacy
#using (Ajax.BeginForm("pharmacyDetials", "Pharmacy", new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "pDetail", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace, LoadingElementId = "Loading", OnBegin = "" }))
{
<h4>تفاصيل الصيدلية</h4>
<div id="pDetail" class="MainGridContainer pb-5">
#if (Model.dtItemsDetails != null)
{
<table dir="rtl" id="Paitents" class="MainGrid">
<thead>
<tr style="text-size-adjust:auto">
<th>
رقم الموظف
</th>
<th>
التاريخ
</th>
<th>
الوقت
</th>
<th>
المستفيدون
</th>
<th>
ملاحظات
</th>
<th>
الباركورد
</th>
<th>
أسم العينة
</th>
<th>
الكمية
</th>
<th>
السعر
</th>
</tr>
</thead>
<tbody>
#foreach (System.Data.DataRow row in Model.dtItemsDetails.Rows)
{
<tr style="width:100%">
<td>
#row["EMPLOYEE_NUMBER"]
</td>
<td>
#row["ENTRY_DATE"]
</td>
<td>
#row["ENTRY_TIME"]
</td>
<td>
#row["BENEFICIARIES"]
</td>
<td>
#row["NOTE"]
</td>
<td>
#row["ITEM_CODE"]
</td>
<td>
#row["ITEM_NAME"]
</td>
<td>
#row["QTY"]
</td>
<td>
#row["PRICE"]
</td>
</tr>
}
</tbody>
</table>
}
</div>
}
And the follwing controller:
[HttpGet]
public ActionResult pharmacyDetials(Pharmacy model)
{
var masterID = Convert.ToInt32(Session["login"]);
if (masterID == 0)
{
return RedirectToAction("Login");
}
else
{
Models.Pharmacy objPharamcyMode = new Pharmacy();
IDECOServiceReference.IdecoAPIServiceClient idecoAPI = new IDECOServiceReference.IdecoAPIServiceClient();
DataTable dataTable = idecoAPI.GETPHARMACYEMPLOYEEMASTER("", 1);
model.dtItemsDetails = dataTable;
return PartialView("_PharmacyDetails", model);
}
}
And the following main view:
#model IDECOHealthInsurance.Models.Pharmacy
#{
ViewBag.Title = "PharmacyApplication";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<table style="height:680px; width:1280px; border:hidden">
<tr>
<td>
<div id="pDetail">
#Html.Partial("_PharmacyDetails", Model)
</div>
</td>
<td>
#using (Ajax.BeginForm("PharmacyApplication", "Pharmacy", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "updatePnl", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace, LoadingElementId = "Loading", OnBegin = "" }))
{
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" id="panel" value="أضافة" class="btn btn-default" />
</div>
<input class="btn btn-default" type="button" value="خروج" onclick="#("window.location.href='" + #Url.Action("LogOut", "Pharmacy") + "'");" />
</div>
</div>
}
</td>
</tr>
</table>
<div id="updatePnl">
#Html.Partial("_PartialPharmacyDetails", Model)
</div>
<br />
<br />
<br />
<div id="pnlItemsDetails">
#Html.Partial("_PartialItemsDetails", Model)
</div>
When I try to render _PharmacyDetails in my main view it won't return any records. What is the problem? and how I can fix it? Please provide me with an explanation of how this problem occurs. What did I do wrong?
Instead of using Partial method to render the partial view I used Action method:
<tr>
<td>
<div id="pDetail" style="background-color:aliceblue" method="Get">
#Html.Action("pharmacyDetials", Model)
</div>
</td>
<td>

Get value of DropDown at Controller while submitting form MVC

This is My View.
#using (Html.BeginForm("uploadimage",
"PatientDocumentsMain",
FormMethod.Post,
new { #Area = "PatientDocument", enctype =
"multipart/form-data" }))
{
<table cellspacing="0" cellpadding="0" class="table table-
striped">
<tr>
<td>
Document Name:<span class="spnError">*</span>
</td>
<td>
<input type="text" id="txtDocumentName" name="DocName"
class="required form-control" />
</td>
</tr>
<tr>
<td class="tdEditDoc">
<span>Document Type:</span><span class="spnError">*</span>
</td>
<td id="tdDocumentCategory">
#Html.DropDownList("ddlDocumentCategory", null, new { #id = "",
#onchange = "AddCategory();", #class =
"required form-control", #name= "DocType" })
</td>
</tr>
<tr>
<td class="tdEditDoc">
<span>Date:</span><span class="spnError">*</span>
</td>
<td>
<input type="text" id="txtPatientDocumentDate" class="Date
required IsDate form-control" name="DocDate" />
</td>
</tr>
<tr>
<td class="tdEditDoc" style="height: 25px;">
<span>Confidental:</span>
</td>
<td>
<input type="checkbox" id="chkPatientDocumentIsConfedential"
/>
</td>
</tr>
<tr>
<td class="tdEditDoc" style="vertical-align: top">
Comments:
</td>
<td>
<textarea id="txtPatientDocumentComments" name="comments"
style="margin-right: 15px; width: 245px; height: 69px;
border-width: 1px; border-color: #c4c4c4;resize:none"
class="form-control">
</textarea>
</td>
</tr>
</table>
<input type="file" name="file" id="file" title="Upload file(s)" />
}
I'm submitting this form to this controller
public void uploadimage(string DocName, string DocType, string DocDate, string d, string comments, HttpPostedFileBase file)
{
}
I'm getting all other parameters except DropDown value.Plus How can I get Value of checkbox(Checked or not). I'm not using any model and want to do without it.
First parameter is the name of field
#Html.DropDownList("DocType", null, new { #id = "", #onchange = "AddCategory();", #class = "required form-control" })
Dropdown bind with null value ?
#Html.DropDownList("ddlDocumentCategory", null, new { #id = "", #onchange = "AddCategory();", #class = "required form-control", #name= "DocType" })
Also make sure name of input fields same as string parameter.
Helpful link
How to submit your form in asp.net mvc

getting MVC 2 form values in controller action using jquery ajax

I am working on asp.net MVC 2 application. I have a form like this:
<% using (Html.BeginForm("UpdateRecordingDetails", "Recording", FormMethod.Post, new { id = "frmRecordingEdit" }))
{%>
<%= Html.Hidden("AccountIDsEdit", ViewData["AccountIDsEdit"]) %>
<%= Html.Hidden("SelId", ViewData["SelId"]) %>
<%= Html.Hidden("EditMode", ViewData["EditMode"]) %>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr valign="top">
<td>
<table align="center">
<tr>
<td style="width: 32%;">
<%=Html.HiddenFor(model=>model.Id) %>
<b>Person Name</b>
</td>
<td>
<%: Html.TextBoxFor(model => model.PersonName, new { #class = "textarea wide" , disabled ="disabled"})%>
</td>
</tr>
<tr>
<td style="width: 32%;">
<b>Email</b>
</td>
<td>
<%: Html.TextBoxFor(model => model.Email, new { #class = "textarea wide" })%>
</td>
</tr>
<tr>
<td style="width: 32%;">
<b>Notes</b>
</td>
<td>
<%: Html.TextAreaFor(model => model.Notes, new { #class = "textarea widetextarea" })%>
</td>
</tr>
<tr>
<td style="width: 32%;">
<b>Display Notes on Playback</b>
</td>
<td>
<%: Html.DropDownList("isNotesVisible", ViewData["displayNotes"] as SelectList, new {#class = "normal" })%>
</td>
</tr>
<tr>
<td style="width: 32%;">
<b>Call ID Number</b>
</td>
<td>
<%: Html.TextBoxFor(model => model.CallIDNumber, new { #class = "textarea normal", disabled = "disabled" })%>
</td>
</tr>
<tr>
<td style="width: 32%;">
<b>Dblink Unique URL</b>
</td>
<td>
<span id="DBLinkUniqueURL" class="small">
<%= Model.DBLinkUniqueURL %>
</span>
<input id="btnCopy" type="button" value="Copy to Clipboard" onclick="copyToClipboard('DBLinkUniqueURL')" />
</td>
</tr>
<tr>
<td>
<b>Call Password</b>
</td>
<td>
<%: Html.TextBoxFor(model => model.CallPassword, new { #class = "textarea wide", disabled = "disabled" })%>
</td>
</tr>
<tr>
<td>
<b>Number Called</b>
</td>
<td>
<%: Html.TextBoxFor(model => model.NumberCalledFrom, new { #class = "textarea wide", disabled = "disabled" })%>
</td>
</tr>
<tr>
<td>
<b>Called From</b>
</td>
<td>
<%: Html.TextBoxFor(model => model.NumberCalledTo, new { #class = "textarea wide", disabled = "disabled" })%>
</td>
</tr>
<tr>
<td>
<b>Call Duration</b>
</td>
<td>
<%: Html.TextBoxFor(model => model.CallDuration, new { #class = "textarea normal", disabled = "disabled" })%>
</td>
</tr>
<tr>
<td>
<b>Call Rate</b>
</td>
<td>
<%: Html.TextBoxFor(model => model.CallRate, new { #class = "textarea normal", disabled = "disabled" })%>
</td>
</tr>
<tr>
<td>
<b>Call Cost</b>
</td>
<td>
<%: Html.TextBoxFor(model => model.CallCost, new { #class = "textarea tiny", disabled = "disabled" })%>
<%: Html.TextBoxFor(model => model.CallCost, new { #class = "textarea normal", disabled = "disabled" })%>
</td>
</tr>
<tr>
<td>
<b>User ID/ Email</b>
</td>
<td>
<%: Html.TextBoxFor(model => model.LoginId, new { #class = "textarea wide", disabled = "disabled" })%>
</td>
</tr>
<tr>
<td>
<b>Date/Time Added</b>
</td>
<td>
<%: Html.TextBoxFor(model => model.CreationDate, new { #class = "textarea wide", disabled = "disabled" })%>
</td>
</tr>
<tr>
<td>
<b>Call Status</b>
</td>
<td>
<%: Html.TextBoxFor(model => model.CallStatus, new { #class = "textarea normal", disabled = "disabled" })%>
</td>
</tr>
<tr>
<td>
<b>Archived</b>
</td>
<td>
<%: Html.CheckBoxFor(model => model.isArchived, new { disabled = "disabled"})%>
</td>
</tr>
</table>
</td>
</tr>
</table>
<%
}
%>
I have a button outside this form, which posts the form with jquery ajax like this:
function editAccountDetails() {
jQuery.ajax({
url: "/recording/UpdateRecordingDetails",
type: 'POST',
data: $('frmRecordingEdit').serialize(),
dataType: "json",
contentType: "application/json",
success: function (data) {
alert(data);
}
});
}
In controller action method, I am not getting all these fields. I get only the ones which are in viewdata or which are not disabled and checkbox value. My action method is:
[Authorize]
public ActionResult UpdateRecordingDetails(FormCollection form, CallRecordingModel objCampaignMode)
{
return Content("testing");
}
neither formcollection note the model has all the fields values which are in the form.
[Edit]
form has values for
AccountIDsEdit
SelId
EditMode
Id
Email
Notes
isNotesVisible
isArchived
model has values in three fields
email, Id, notes
<td>
<table align="center">
<tbody><tr>
<td style="width: 32%;">
<input type="hidden" value="2" name="Id" id="Id">
<b>Person Name</b>
</td>
<td>
<input type="text" value="Asif" readonly="readonly" name="PersonName" id="PersonName" disabled="disabled" class="textarea wide">
</td>
</tr>
<tr>
<td style="width: 32%;">
<b>Email</b>
</td>
<td>
<input type="text" value="asif#cc.com" name="Email" id="Email" class="textarea wide">
</td>
</tr>
<tr>
<td style="width: 32%;">
<b>Notes</b>
</td>
<td>
<textarea rows="2" name="Notes" id="Notes" cols="20" class="textarea widetextarea">asif notes</textarea>
</td>
</tr>
<tr>
<td style="width: 32%;">
<b>Display Notes on Playback</b>
</td>
<td>
<select name="isNotesVisible" id="isNotesVisible" class="normal"><option selected="selected">Yes</option>
<option>No</option>
</select>
</td>
</tr>
<tr>
<td style="width: 32%;">
<b>Call ID Number</b>
</td>
<td>
<input type="text" value="callIDNum002" name="CallIDNumber" id="CallIDNumber" disabled="disabled" class="textarea normal">
</td>
</tr>
<tr>
<td style="width: 32%;">
<b>Dblink Unique URL</b>
</td>
<td>
<span class="small" id="DBLinkUniqueURL">
http://temp.com/callIDNum002
</span>
<input type="button" onclick="copyToClipboard('DBLinkUniqueURL')" value="Copy to Clipboard" id="btnCopy">
</td>
</tr>
<tr>
<td>
<b>Call Password</b>
</td>
<td>
<input type="text" value="temppass" name="CallPassword" id="CallPassword" disabled="disabled" class="textarea wide">
</td>
</tr>
<tr>
<td>
<b>Number Called</b>
</td>
<td>
<input type="text" value="03344037289" name="NumberCalledFrom" id="NumberCalledFrom" disabled="disabled" class="textarea wide">
</td>
</tr>
<tr>
<td>
<b>Called From</b>
</td>
<td>
<input type="text" value="0442510406" name="NumberCalledTo" id="NumberCalledTo" disabled="disabled" class="textarea wide">
</td>
</tr>
<tr>
<td>
<b>Call Duration</b>
</td>
<td>
<input type="text" value="00:01:30" name="CallDuration" id="CallDuration" disabled="disabled" class="textarea normal">
</td>
</tr>
<tr>
<td>
<b>Call Rate</b>
</td>
<td>
<input type="text" value="4" name="CallRate" id="CallRate" disabled="disabled" class="textarea normal">
</td>
</tr>
<tr>
<td>
<b>Call Cost</b>
</td>
<td>
<input type="text" value="3" name="CallCost" id="CallCost" disabled="disabled" class="textarea tiny">
<input type="text" value="3" name="CallCost" id="CallCost" disabled="disabled" class="textarea normal">
</td>
</tr>
<tr>
<td>
<b>User ID/ Email</b>
</td>
<td>
<input type="text" value="asif_hameed_371#hotmail.com" name="LoginId" id="LoginId" disabled="disabled" class="textarea wide">
</td>
</tr>
<tr>
<td>
<b>Date/Time Added</b>
</td>
<td>
<input type="text" value="12/19/2012 12:00:00 AM" name="CreationDate" id="CreationDate" disabled="disabled" class="textarea wide">
</td>
</tr>
<tr>
<td>
<b>Call Status</b>
</td>
<td>
<input type="text" value="Completed" name="CallStatus" id="CallStatus" disabled="disabled" class="textarea normal">
</td>
</tr>
<tr>
<td>
<b>Archived</b>
</td>
<td>
<input type="checkbox" value="true" name="isArchived" id="isArchived" disabled="disabled"><input type="hidden" value="false" name="isArchived">
</td>
</tr>
</tbody></table>
</td>
[Edit2]
Request URL:http://localhost:62843/recording/UpdateRecordingDetails
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/javascript, */*; q=0.01
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:0
Content-Type:application/json
Cookie:SiteBrowsedCookie=1;edited value&FirstVisit=9/14/2012 5:42:08 PM; Nop.customer=61f1bf57-034a-4427-a08c-e9442061f224; glimpseState=null; glimpseClientName=null; glimpseOptions=null; ASP.NET_SessionId=lephqzclxx35mjqier5to5l4; .CRM=85A97958C0415B3C8106A7EE2B473EE00C1F53C5E428C399AC951D7AFEA5A325C8BC54225AC959917CF1754734CF8DC6BD13DAAA7DA1EE64D4A177BB3FA3529992A1E596AF6D1D4391242C412EB809F8125EC03DBC1C5A36FDAE3BAB915E2233C30E0876EFE62B3D8CAE1CCAD020DA6791EA17FD3B085C1A913C8DBF822408FD0E2AA3B19F67AFE34C9176A3783F0935D61B847D51958ABB72AB2E9491864F956A90729E; returnUrl=returnUrl=http://localhost:62843/Account/Login
Host:localhost:62843
Origin:http://localhost:62843
Referer:http://localhost:62843/Recording/Detail
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
X-Requested-With:XMLHttpRequest
Response Headersview source
Cache-Control:private, s-maxage=0
Connection:Close
Content-Length:8
Content-Type:text/html; charset=utf-8
Date:Fri, 21 Dec 2012 07:16:02 GMT
Server:ASP.NET Development Server/10.0.0.0
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:3.0
Please suggest solution to it.
data: $('frmRecordingEdit').serialize(),
should be:
data: $('#frmRecordingEdit').serialize(),
because that's how id selectors work in jQuery.
Also you haven't shown how/where you are calling the editAccountDetails function that is sending the AJAX request but if this is inside an onsubmit handler of the form or an onclick handler of a submit button of this form or an onclick handler of some anchor you should make sure that you return false from this handler to ensure that you are cancelling the default action and giving chance of the AJAX call to execute. If you do not cancel the default action the browser will simply redirect away from the page leaving no chance of any AJAX calls to execute.

All model and Formcollection values are null, blank or don't exist in Firefox or Chrome

During debugging, my MVC model and Formcollection are blank with no values in FireFox (15) or Chrome (latest version).
During debugging using IE (9), I can see these values just fine.
Do you know what the solution is for this? This is very serious for public facing web sites not being able to do any programming angainst these browsers.
Here is my View...
#model PDFConverterModel.ViewModels.ViewModelTemplate_Guarantors
#{
ViewBag.Title = "BHG :: PDF Generator";
}
<h2>#ViewBag.Message</h2>
<div>
<table style="width: 1000px">
<tr>
<td colspan="5">
<img alt="BHG Logo" src="~/Images/logo.gif" />
</td>
</tr>
#using (Html.BeginForm("ProcessForm", "Home", FormMethod.Post))
{
<tr>
<td>
#(Html.Kendo().IntegerTextBox()
.Name("LoanID")
.Placeholder("Enter Loan ID")
)
</tr>
<tr>
<td>#Html.LabelFor(model => model.LoanType)
#Html.DisplayFor(model => model.LoanType)
</td>
<td>
<label for="ddlDept">Department:</label>
#(Html.Kendo().DropDownList()
.Name("ddlDept")
.DataTextField("DepartmentName")
.DataValueField("DepartmentID")
.Events(e => e.Change("Refresh"))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDepartments", "Home");
});
})
)
</td>
</tr>
if (Model.ShowGeneratePDFBtn == true)
{
if (Model.ErrorT == string.Empty)
{
<tr>
<td colspan="5">
<u><b>#Html.Label("Templates:")</b></u>
</td>
</tr>
<tr>
#for (int i = 0; i < Model.Templates.Count; i++)
{
<td>
#Html.CheckBoxFor(model => Model.Templates[i].IsChecked)
#Html.DisplayFor(model => Model.Templates[i].TemplateId)
</td>
}
</tr>
}
else
{
<tr>
<td>
<b>#Html.DisplayFor(model => Model.ErrorT)</b>
</td>
</tr>
}
if (Model.ErrorG == string.Empty)
{
<tr>
<td colspan="5">
<u><b>#Html.Label("Guarantors:")</b></u>
</td>
</tr>
<tr>
#for (int i = 0; i < Model.Guarantors.Count; i++)
{
<td>
#Html.CheckBoxFor(model => Model.Guarantors[i].isChecked)
#Html.DisplayFor(model => Model.Guarantors[i].GuarantorFirstName) #Html.DisplayFor(model => Model.Guarantors[i].GuarantorLastName)
</td>
}
</tr>
}
else
{
<tr>
<td>
<b>#Html.DisplayFor(model => Model.ErrorG)</b>
</td>
</tr>
}
}
<tr>
<td colspan="3">
<input type="submit" name="submitbutton" id="btnRefresh" value='Refresh' />
</td>
#if (Model.ShowGeneratePDFBtn == true)
{
<td>
<input type="submit" name="submitbutton" id="btnGeneratePDF" value='Generate PDF' />
</td>
}
</tr>
<tr>
<td colspan="5">
#Model.Error
</td>
</tr>
}
</table>
</div>
<script type="text/javascript">
$('btnRefresh').on('click', '#btnRefresh', function () {
Refresh();
});
function Refresh() {
var LoanID = $("#LoanID").val();
if (LoanID != "") {
document.forms[0].submit();
}
else {
alert("Please enter a LoanId");
}
}
</script>
I know this is a very old question, but answering this might help people like who are struggling with this issue.
I had a similar issue. The problem lies here:
<table style="width: 1000px">
<tr>
<td colspan="5">
<img alt="BHG Logo" src="~/Images/logo.gif" />
</td>
</tr>
#using (Html.BeginForm("ProcessForm", "Home", FormMethod.Post))
{
<tr>
<td>
#(Html.Kendo().IntegerTextBox()
.Name("LoanID")
.Placeholder("Enter Loan ID")
)
</td>
</tr>
}
</table>
After begin form there are <tr> tags directly! Browsers like chrome and mozilla get confused in such cases. The <table> tag should be inside the form. If we look at your code, which was exactly what I had done, <table> tag was before #using Html.BeginForm.
Internet Explorer somehow understands this, but the other browsers don't.
When I did an inspect element I found that there was a form tag within each <tr> tag and it always returned FormCollection as null. Simply defining <table> within form solved my problem.
So here's how it should be:
<table style="width: 1000px">
<tr>
<td colspan="5">
<img alt="BHG Logo" src="~/Images/logo.gif" />
</td>
</tr>
<tr><td>
#using (Html.BeginForm("ProcessForm", "Home", FormMethod.Post))
{
<table>
<tr>
<td>
#(Html.Kendo().IntegerTextBox()
.Name("LoanID")
.Placeholder("Enter Loan ID")
)
</td>
</tr>
</table>
}
</td></tr>
</table>
I just found out what the issue is by experimneting.
The Telerik MVC widgets don't emit any FormCollection data!!!!
Only EditorFor and TextBoxFor emit these values, plus the input buttons.
What good are these widgets if I can't use the FormCollection values from them???? Especially the DropDownList where I can retrireve data and need the selected value to pass onto other methods.
(This would be better suited as comment, but I can't comment yet)
For future reference, here's a spec (W3C might have something different) for what gets submitted when a form is submitted:
http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#category-submit
You can look at whatever HTML was generated to make sure it gets submitted. You could also use something like Fiddler to look at the Http request

MVC multiple forms on single view not working

I have 2 forms on a single razor view that open in seperate dialog boxes. The forms are submitted using jquery post..
First form works perfectly but the second form isnt recognised at all and when I try to serializr the data it returns an empty string.
Code below:
#using (Html.BeginForm("SaveElectricReading", "Store", FormMethod.Post, new { id = "frmSaveElectricReading" }))
{
<div id="electricDialog" style="display: none;" title="Electric Readings">
<p>
Please ensure the electric readings have been entered!
</p>
<table width="100%">
<tr>
<th>
Serial:
</th>
</tr>
<tr>
<td>
<input type="text" name="Serial" />
</td>
</tr>
<tr>
<th>
Reading:
</th>
</tr>
<tr>
<td>
<input type="text" name="Reading" />
</td>
</tr>
<tr>
<th>
Comment:
</th>
</tr>
<tr>
<td>
<div class="textwrapper">
<textarea rows="5" cols="10" name="Comment"></textarea>
</div>
</td>
</tr>
</table>
</div>
}
#using (Html.BeginForm("SaveWaterReading", "Store", FormMethod.Post, new { id = "myform" }))
{
<div id="waterDialog" style="display: none;" title="Water Readings">
<p>
Please ensure the water readings have been entered!
</p>
<table width="100%">
<tr>
<th>
Serial:
</th>
</tr>
<tr>
<td>
<input type="text" name="WaterSerial" />
</td>
</tr>
<tr>
<th>
Reading:
</th>
</tr>
<tr>
<td>
<input type="text" name="WaterReadingsdfsdf" />
</td>
</tr>
<tr>
<th>
Comment:
</th>
</tr>
<tr>
<td>
<div class="textwrapper">
<textarea rows="5" cols="10" name="WaterComment"></textarea>
</div>
</td>
</tr>
</table>
</div>
}
function showWaterDialog() {
var $dialog = $('#waterDialog').dialog({
autoOpen: false,
modal: true,
width: 400,
height: 400,
buttons: {
Submit: function () {
// $('#frmCreateStore').submit();
var data = $('#frmSaveWaterReading');
$.post("/Store/SaveWaterReading",
$("#frmSaveWaterReading").serialize(),
function () {
$("#waterDialog").dialog("close");
});
//$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
}
In the jquery function for showing the dialog with the form in it, I needed to add that dialog content to the second form on the page as follows:
$("#waterDialog").parent().appendTo($("form").eq(1)[0]);

Resources