[英]My JQuery AJax call does not serialize form data and load the partial view
我正在使用ASPNET MVC視圖提交一些搜索條件並使用結果加載部分視圖。 我正在對我的控制器/ Action進行ajax調用並加載局部視圖。 當我序列化表單時,序列化對象應該發送到我的操作方法,但這不起作用。 我也返回局部視圖,但它不渲染局部視圖的html。
請參閱下面的代碼,並在此處提出任何不正確或缺失的內容。
這是腳本:
$('#btnsearch').click(function () {
var formData = new FormData();
var form = $('form').serialize();
alert(form);
formData.append('Panel', form);
$.ajax({
url: "Email/GetEmails",
type:'POST',
dataType: 'html',
data: formData,
processData: false,
contentType: false,
success: function (result) {
alert(result);
$("._EmailPartial").html(result);
},
error: function () {
alert('Failed to retrieve the Emails.');
}
});
});
以下是主要和部分視圖:
@using AllturnaCRMOperations.Models
@model AllturnaCRMOperations.Models.EmailSearchPanel
@{
ViewBag.Title = "Enter the filters to see emails";
}
<h3 class="text-center"><span>@ViewBag.Title</span> </h3>
<div class="row">
<div class="SearchPanel" id="SearchPanel">
<div class="container">
@using (Html.BeginForm(new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group" style="margin-top:10px">
<div class="col-sm-2">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label" })
@Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
@Html.LabelFor(model => model.MessageType, htmlAttributes: new { @class = "control-label" })
@Html.DropDownListFor(model => model.MessageType, Model.lstSelectMessageType, new { @id = "ddMessageType", @class = "form-control" })
@Html.ValidationMessageFor(model => model.MessageType, "", new { @class = "text-danger", AutoPostBack = "True" })
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
@Html.LabelFor(model => model.DateRange, htmlAttributes: new { @class = "control-label" })
@Html.DropDownListFor(model => model.DateRange, Model.lstSelectDateRange, new { @id = "ddDateRange", @class = "form-control" })
@Html.ValidationMessageFor(model => model.DateRange, "", new { @class = "text-danger", AutoPostBack = "True" })
</div>
</div>
<div class="form-group">
<div class="col-sm-2 displaydate">
@Html.LabelFor(model => model.CustomFromDate, htmlAttributes: new { @class = "control-label" })
@Html.TextBoxFor(model => model.CustomFromDate, new { type = "date", @id = "customFromDate", @class = "form-control" })
@Html.ValidationMessageFor(model => model.CustomFromDate, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-sm-2 displaydate" id="todate">
@Html.LabelFor(model => model.CustomToDate, htmlAttributes: new { @class = "control-label" })
@Html.TextBoxFor(model => model.CustomToDate, new { type = "date", @id = "customToDate", @class = "form-control" })
@Html.ValidationMessageFor(model => model.CustomToDate, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-actions" style="margin-bottom:20px">
<div class="col-sm-2 text-center">
<p></p>
<input type="submit" id="btnsearch" class="btn btn-success" />
</div>
</div>
}
</div>
</div>
</div>
<p class="text-right" style=" margin-top:20px">
@Html.ActionLink("Create New", "Create")
</p>
<section class="row" id="emailPartial">
<div class="SearchPanel">
<div class="container">
@*@Html.Partial("_EmailPartial", new List<Email>())*@
</div>
</div>
</section>
局部視圖:
@model IEnumerable<AllturnaCRMOperations.Models.Email>
@{
ViewBag.Title = "View";
}
<table class="table table-hover table-responsive scrollable table-striped">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
<th>
@Html.DisplayNameFor(model => model.CreateDate)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
@Html.DisplayFor(modelItem => item.CreateDate)
</td>
<td>
@Html.ActionLink("Details", "Details", new { /* id=item.Name */ }) |
</td>
</tr>
}
</table>
和控制器:
public ActionResult GetEmails(EmailSearchPanel Panel)
{
List<Email> lstEmails = new EmailViewModel().BuildModel();
return PartialView("_EmailPartial",lstEmails);
}
請幫我解決這個問題。 提前致謝。
你的第一個問題是在你的AJAX調用中使用'form'而不是'formData'。 然后你的控制器應該得到你傳遞的表格值。
$('#btnsearch').click(function () { var formData = new FormData(); var form = $('form').serialize(); alert(form); formData.append('Panel', form); $.ajax({ url: "Email/GetEmails", type: 'POST', dataType: 'html', data: form, processData: false, contentType: false, success: function (result) { alert(result); $("._EmailPartial").html(result); }, error: function () { alert('Failed to retrieve the Emails.'); } }); });
你使用局部視圖的方式有點不正統,我建議你做更多的研究。 參考:
這解決了。 我的部分視圖正在呈現,然后頁面自動刷新。 我是因為我使用了button type = submit,它對服務器進行了完整的回發,所以它刷新了頁面並覆蓋了ajax結果。 我用type =按鈕更改了按鈕,結果按照我的預期呈現。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.