jquery - How to dynamically load partial view Via jquery ajax in Asp.Net MVC
问题描述
I have page where i need input data and submit form. Page should dynamically load partialView through ajax. What i have:
SearchData Model:
public class SearchData
{
public SearchData()
{
documents = GetDocuments();
data = new List<DisplayData>();
}
public bool isAdmin { get; set; }
public string emc { get; set; }
public string receiver { get; set; }
public DateTime receiveDateFrom { get; set; }
public DateTime receiveDateTo { get; set; }
public int document { get; set; }
public List<SelectListItem> documents { get; set; }
public IEnumerable<DisplayData> data { get; set; }
}
Above DisplayData
is a model of my partial View Show
.
My main Index
view is below:
@model web_archive_monitoring.Models.SearchData
@{
ViewBag.Title = "View";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm())
{
<table>
<tr>
<td>
<div class="form-group">
@Html.LabelFor(model => model.emc)
<br />
<div class="col-md-10">
@Html.TextBoxFor(model => model.emc, new { @class = "form-control" })@*, @placeholder = "Password"*@
@Html.ValidationMessageFor(model => model.emc, "", new { @class = "text-danger" })
</div>
</div>
</td>
<td>
<div class="form-group">
@Html.LabelFor(model => model.receiveDateFrom)
<br />
<div class="col-md-10">
@if (Model.isAdmin)
{
@Html.TextBoxFor(model => model.receiveDateFrom, "{0:dd/MM/yyyy}", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.receiveDateFrom, "", new { @class = "text-danger" })
}
else
{
@Html.TextBoxFor(model => model.receiveDateFrom, "{0:dd/MM/yyyy}", new { @class = "form-control", disabled = "disabled" })
}
</div>
</div>
</td>
<td>
<div class="form-group">
@Html.LabelFor(model => model.receiveDateTo)
<br />
<div class="col-md-10">
@if (Model.isAdmin)
{
@Html.TextBoxFor(model => model.receiveDateTo, "{0:dd/MM/yyyy}", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.receiveDateTo, "", new { @class = "text-danger" })
}
else
{
@Html.TextBoxFor(model => model.receiveDateTo, "{0:dd/MM/yyyy}", new { @class = "form-control", disabled = "disabled" })
}
</div>
</div>
</td>
<td>
<div class="form-group">
@Html.LabelFor(model => model.receiver)
<br />
<div class="col-md-10">
@Html.DropDownListFor(model => model.receiver, Model.receivers, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.receiver, "", new { @class = "text-danger" })
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
@Html.LabelFor(model => model.document)
<br />
<div class="col-md-10">
@Html.DropDownListFor(m => m.document, Model.documents, new { @id = "reg", @class = "form-control" })
@Html.ValidationMessageFor(model => model.document, "", new { @class = "text-danger" })
</div>
</div>
</td>
</tr>
</table>
<br />
<br />
<div class="form-group">
<input type="submit" value="Search" class="btn btn-default"/>
</div>
}
<div id="search">
@{
Html.RenderPartial("DisplayData", Model.data);
}
</div>
My partial View only display data that user queried.
@model IEnumerable<web_archive_monitoring.Models.DisplayData>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.emc)
</th>
<th>
@Html.DisplayNameFor(model => model.sendDate)
</th>
<th>
@Html.DisplayNameFor(model => model.docCode)
</th>
<th>
@Html.DisplayNameFor(model => model.sendAmount)
</th>
<th>
@Html.DisplayNameFor(model => model.receiveAmount)
</th>
<th>
@Html.DisplayNameFor(model => model.productCode)
</th>
<th>
@Html.DisplayNameFor(model => model.financePeriod)
</th>
<th>
@Html.DisplayNameFor(model => model.deliveryStatus)
</th>
<th>
@Html.DisplayNameFor(model => model.receiveDate)
</th>
<th>
@Html.DisplayNameFor(model => model.emcStatus)
</th>
@*<th></th>*@
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.emc)
</td>
<td>
@Html.DisplayFor(modelItem => item.sendDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.docCode)
</td>
<td>
@Html.DisplayFor(modelItem => item.sendAmount)
</td>
<td>
@Html.DisplayFor(modelItem => item.receiveAmount)
</td>
<td>
@Html.DisplayFor(modelItem => item.productCode)
</td>
<td>
@Html.DisplayFor(modelItem => item.financePeriod)
</td>
<td>
@Html.DisplayFor(modelItem => item.deliveryStatus)
</td>
<td>
@Html.DisplayFor(modelItem => item.receiveDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.emcStatus)
</td>
@*<td>
@Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
@Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
@Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
</td>*@
</tr>
}
</table>
Here is my jquery call:
<script>
var url = '@Url.Action("DisplayData", "Show")';
$('form').submit(function () {
alert("debug1");
var form = $(this).serialize();
alert("data is: " + form);
$('#search').load(url, form);
alert(url);
})
</script>
And in the DisplayData
controller i do some manipulation. query DB and return the same model with not empty public IEnumerable<DisplayData> data
that uses my partialView.
public ActionResult DisplayData(SearchData model)
{
//some manipulation
model.data = data;
return PartialView("DisplayData", model);
}
But my partial View is not dynamically loaded. I will be glad for any help.
解决方案
submit
为提交按钮分配 ID
<input type="submit" value="Search" id="submit" class="btn btn-default"/>
改变你的js如下:
var url = '@Url.Action("DisplayData", "Show")';
$('#submit').on('click',function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: url,
data:$('form').serialize(),
}).done(function (r) {
$('#search').html(r);
}).fail(function (e) {
console.log(e.responseText);
});
});
相应地更改控制器代码:
public ActionResult DisplayData(SearchData model)
{
//some manipulation
model.data = data;
return PartialView("DisplayData", model.data);
}
推荐阅读
- python - 在 Python 中将多个图打印到 PDF(每页一个图)
- javascript - 错误未定义不是对象(评估'_expo.Constants.statusBarHeight')
- java - 我的代码是否适用于访问器和修改器方法?
- visual-studio-code - 如何将 TextMate 语法(XML 风格)转换为 YAML 或 JSON 风格
- jbpm - 如何配置 JBPM 的 REST API 以返回 JSON 中的日期时间作为值而不是具有“java.util.Date”属性的 JSON 对象?
- sql - 有没有办法在 CASE WHEN SQL 语句中组合两个条件?
- jmeter - 关于平均响应时间计算的问题
- reactjs - 如何使输入字段文本可编辑?
- javascript - 类组件运行两次而函数只运行一次,为什么?
- javascript - 将区域/矩形选择限制在javascript中的有限区域