使用Asp.Net Mvc中的Ajax刷新表列表 [英] Refresh table list using Ajax in Asp.Net Mvc
问题描述
我尝试了一些东西，但只能第一次工作（从：在ASP.NET MVC中使用AJAX刷新表）。
这是我的控制器代码： / p>
public ActionResult IndexEvent（）
{
return View（db.tbl_Event.ToList（））;
}
[HttpGet]
public ActionResult Add（）
{
return View（）;
}
[HttpPost]
public ActionResult添加（BOL3.tbl_Event eve）
{
if（ModelState.IsValid）
{
db.tbl_Event.Add（eve）;
db.SaveChanges（）;
}
return IndexEvent（）;
}
，这里是动作按钮和模式：
< button type =buttonclass =btn btn-info btn-xsdata-toggle =modaldata-target =＃enquirypopup>添加< / button>< div id =enquirypopupclass =modal fade inrole =dialogtabindex = - 1> < div class =modal-dialog> < div class =modal-content row> < div class =modal-header custom-modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>添加事件< / h4> < / DIV> < div class =modal-body> < form id =myForm> < div class =modal-body> < div class =row form-group> < div class =col-md-12> < div class =input-group> < span class =input-group-addon>< / span> < input type =textclass =form-controlname =Eventid =Eventplaceholder =Event Name> < / DIV> < / DIV> < / DIV> < div class =row form-group> < div class =col-md-12> < div class =input-group> < span class =input-group-addon>< / span> < input type =textclass =form-controlname =Start_Dateid =Start_Date> < / DIV> < / DIV> < / DIV> < div class =row form-group> < div class =col-md-12> < div class =input-group> < span class =input-group-addon>< / span> < input type =textclass =form-controlname =End_Dateid =End_Date> < / DIV> < / DIV> < / DIV> < br /> < div class =modal-footer> < button type =buttonclass =btn btn-dangerdata-dismiss =modal>关闭< / button> < button type =submitclass =btn btn-successid =btnSubmit> Save< / button> < / DIV> < /形式> < / DIV> < / DIV> < / div>< / div>
表和脚本部分：
< script> $（document）.ready（function（）{$（＃btnSubmit）。click（function（）{var myformdata = $（＃myForm）。serialize（）; $ .ajax（{type：POST ，url：/ Prog / Add，data：myformdata，success：function（）{$（＃enquirypopup）.modal（hide）; $（＃tbl）。load（/ Prog / IndexEvent ）; //$(\"#tbl\").reload(\"/Prog/IndexEvent）;}}）}）}）< / script> pre class =snippet-code-html lang-html prettyprint-override> @model .....< div class =table-responsive> < table class =table table-bordered table-stripedid =tbl> < THEAD> < TR> < th>事件名称< / th> < th>起始（日期和时间）< / th> < th>结束（日期和时间）< / th> < th> All Day？< / th> <的第i;< /第> < / TR> < / THEAD> < TBODY> @foreach（模型中的var item）{< tr> < TD> @ Html.DisplayFor（modelItem => item.Event）< / td> < TD> @ Html.DisplayFor（modelItem => item.Start_Date）< / td> < TD> @ Html.DisplayFor（modelItem => item.End_Date）< / td> < TD> @ Html.DisplayFor（modelItem => item.All_Day）< / td> < td style =align-content：center> < a href =@ Url.Action（EditEvent，Prog，new {id = item.ID}）class =editDialog> Edit< / a> | @ Html.ActionLink（删除，删除，新的{id = item.ID}）< / td> < / TR> }< / tbody> < / table>< / div>
真的知道这个模式的工作究竟如何，这是我第一次使用它们，所以如果你能帮助我，我真的很喜欢它。谢谢。
简单！
添加location.reload（）成功。
$ .ajax（{
type：POST，
url：/ Prog / Add
data：myformdata，
success：function（）{
$（＃enquirypopup）。modal（hide）;
location.reload（）;
}
}）;
希望帮助。
I have a problem with a modal, after I create a new entry, my table list doesn't show me the last created row in the table (in my database it allready exists), it display's it only after I refresh the page.
I tried something but only worked the first time (from: Refresh table using AJAX in ASP.NET MVC).
Here is my controller code for it:
public ActionResult IndexEvent()
{
return View(db.tbl_Event.ToList());
}
[HttpGet]
public ActionResult Add()
{
return View();
}
[HttpPost]
public ActionResult Add(BOL3.tbl_Event eve)
{
if(ModelState.IsValid)
{
db.tbl_Event.Add(eve);
db.SaveChanges();
}
return IndexEvent();
}
, here is the action button and modal:
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#enquirypopup">Add</button>
<div id="enquirypopup" class="modal fade in" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content row">
<div class="modal-header custom-modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Event</h4>
</div>
<div class="modal-body">
<form id="myForm">
<div class="modal-body">
<div class="row form-group">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"></span>
<input type="text" class="form-control" name="Event" id="Event" placeholder="Event Name">
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"></span>
<input type="text" class="form-control" name="Start_Date" id="Start_Date">
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"></span>
<input type="text" class="form-control" name="End_Date" id="End_Date">
</div>
</div>
</div>
<br />
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success" id="btnSubmit">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
and here is the table and script part:
<script>
$(document).ready(function () {
$("#btnSubmit").click(function () {
var myformdata = $("#myForm").serialize();
$.ajax({
type: "POST",
url: "/Prog/Add",
data: myformdata,
success: function () {
$("#enquirypopup").modal("hide");
$("#tbl").load("/Prog/IndexEvent");
//$("#tbl").reload("/Prog/IndexEvent");
}
})
})
})
</script>
@model.....
<div class="table-responsive">
<table class="table table-bordered table-striped" id="tbl">
<thead>
<tr>
<th>Event Name</th>
<th>Starting (Date and Time)</th>
<th>Ending (Date and Time)</th>
<th>All Day ?</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach(var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Event)
</td>
<td>
@Html.DisplayFor(modelItem => item.Start_Date)
</td>
<td>
@Html.DisplayFor(modelItem => item.End_Date)
</td>
<td>
@Html.DisplayFor(modelItem => item.All_Day)
</td>
<td style="align-content:center">
<a href="@Url.Action("EditEvent", "Prog", new { id = item.ID})" class="editDialog">Edit</a> |
@Html.ActionLink("Delete", "Delete", new { id = item.ID })
</td>
</tr>
}
</tbody>
</table>
</div>
I don't really know how exactly this modal's work, it's my first time using them so if you could help me out I really appriciate it. Thanks.
Simple! Add location.reload() in success.
$.ajax({
type: "POST",
url: "/Prog/Add",
data: myformdata,
success: function () {
$("#enquirypopup").modal("hide");
location.reload();
}
});
Hope Helps.
这篇关于使用Asp.Net Mvc中的Ajax刷新表列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
