如何在Asp.Net MVC中通过jquery ajax动态加载部分视图 [英] How to dynamically load partial view Via jquery ajax in Asp.Net MVC
本文介绍了如何在Asp.Net MVC中通过jquery ajax动态加载部分视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个页面，我需要输入数据并提交表单.页面应该通过ajax动态加载partialView.我有什么:
I have page where i need input data and submit form. Page should dynamically load partialView through ajax. What i have:
SearchData模型:
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; }
}
DisplayData以上是我的局部视图Show的模型.
Above DisplayData is a model of my partial View Show.
我的主要Index视图如下:
@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>
这是我的jquery调用:
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>
然后在DisplayData控制器中进行一些操作.查询数据库并返回使用我的partialView的不为空的public IEnumerable<DisplayData> data相同的模型.
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.
推荐答案
分配ID submit提交按钮
<input type="submit" value="Search" id="submit" class="btn btn-default"/>
按如下所示更改您的js:
Change your js as follows:
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);
});
});
相应地更改控制器代码:
Change Controller code accordingly:
public ActionResult DisplayData(SearchData model)
{
//some manipulation
model.data = data;
return PartialView("DisplayData", model.data);
}
这篇关于如何在Asp.Net MVC中通过jquery ajax动态加载部分视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
