通过AJAX调用更新表中的数据 [英] Updating Data in Table from AJAX Call
问题描述
好的，所以我通过将return语句更改为return PartialView("_GridView", model);来调用Partial View _GridView，但是它不会用我的数据更新表.我已经跟踪了它，它正在发送正确的模型并使用正确的数据遍历表，并且AJAX调用成功，但是数据仍然是相同的数据.有任何想法吗?
OK, so I got it to call the Partial View _GridView by changing my return statement to return PartialView("_GridView", model); but it won't update the table with my data. I've traced it and it it's sending the correct model and iterating through the table with the correct data and the AJAX call is successful, but the data is still the same data. Any ideas anyone?
我在一个视图中有两个局部视图.一个带有一些我用作过滤器的下拉列表，另一个是显示数据库信息的表:
I have two partial views in a view. One that has a few dropdownlists that I'm using as filters and the other is a table that displays database info:
我的观点:
@model IEnumerable<PPL.Models.GridPart>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div id="dropDownsDiv">
@Html.Partial("_DropDownsView", Model)
</div>
<div id="theGrid">
@Html.Partial("_GridView", Model)
</div>
部分视图_GridView:
Partial View _GridView:
@model IEnumerable<PPL.Models.GridPart>
@{
ViewBag.Title = "_GridView";
}
<div id="theGrid">
<table>
<tr>
<th>
@Html.DisplayNameFor(model => model.Category)
</th>
<th>
@Html.DisplayNameFor(model => model.Type)
</th>
<th>
@*@Html.DisplayNameFor(model => model.PartNum)*@
Part #
</th>
<th>
@Html.DisplayNameFor(model => model.Status)
</th>
<th>
@Html.DisplayNameFor(model => model.REL)
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Category)
</td>
<td>
@Html.DisplayFor(modelItem => item.Type)
</td>
<td>
@Html.DisplayFor(modelItem => item.PartNum)
</td>
<td bgcolor="#@Html.DisplayFor(modelItem => item.StatusColor)">
@Html.DisplayFor(modelItem => item.Status)
</td>
<td bgcolor="#@Html.DisplayFor(modelItem => item.RELColor)">
@Html.DisplayFor(modelItem => item.REL)
</td>
</tr>
}
</table>
部分视图_DropDownsView:
Partial View _DropDownsView:
@{
ViewBag.Title = "_DropDownsView";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
// assuming you're using jQuery
$(document).ready(function () {
$("#Categories").change(function () {
//alert("I'm here!");
//Update typeDropDown
$.ajax({
url: '/Part/Myajaxcall',
type: 'POST',
datatype: 'json',
data: { id: $("#Categories").val() },
success: function (data) {
$('#typeDropDown option[value!="0"]').remove()
$.each(data, function (i, item) {
$('#typeDropDown').append('<option value="' + item.DescriptorID + '">' + item.pplType + '</option>');
});
},
error: function(jqXHR, textStatus, errorThrown){
alert(errorThrown);
}
});
//Update Data Grid
$.ajax({
url: '/Part/updateGrid',
type: 'POST',
datatype: 'json',
data: { id: $("#Categories").val() },
success: function (data) {
alert("Got it!");
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
</script>
Category: @Html.DropDownList("Categories", " ")
Type: <select id="typeDropDown"><option value="0"></option></select>
Manufacturer: @Html.DropDownList("Manufacturers", " ")
我要完成的工作是，从类别"下拉列表中选择一个项目时，我想首先通过AJAX更新第二个下拉列表(正在运行)，接下来，我想使用我的数据.
What I'm trying to accomplish is when an item is selected from the Categories drop down list, I want to first update the second drop down list via AJAX (which is working) and next, I want to update the table with my data.
这是我的控制器:
public class PartController : Controller
{
private PartContext db = new PartContext();
//
// GET: /Part/
public ActionResult Index()
{
//Use LINQ to query DB & Get all of the parts
//Join PPLPart & PPLDescriptor Tables
var myParts = from p in db.Parts
join d in db.Descriptors on p.DescriptorID equals d.DescriptorID
select new
{
Category = d.DescriptorDesc,
TypeCol = p.PPLType,
PartNumber = p.PartNum,
Status = p.PPLStatus,
StatusColor = p.PPLStatusBGColor,
REL = p.RELStatus,
RELColor = p.RELStatusBGColor
};
//Drop the parts into a List
List<GridPart> pl = new List<GridPart>();
foreach (var m in myParts)
{
GridPart gp = new GridPart();
gp.Category = m.Category;
gp.Type = m.TypeCol;
gp.PartNum = m.PartNumber;
gp.Status = m.Status;
gp.StatusColor = m.StatusColor;
gp.REL = m.REL;
gp.RELColor = m.RELColor;
pl.Add(gp);
}
var model = pl;
//Pass info for Categories drop-down
ViewBag.Categories = new SelectList(db.Descriptors, "DescriptorID", "DescriptorDesc");
//Pass info for Manufacturer drop-down
ViewBag.Manufacturers = new SelectList(db.Manufacturers, "ManufacturerID", "ManufacturerName");
//Pass off to View
return View(model);
}
[HttpPost]
public ActionResult updateGrid(string id)
{
int intID = Convert.ToInt32(id);
//Use LINQ to query DB & Get all of the parts
//Join PPLPart & PPLDescriptor Tables
var myParts = from p in db.Parts
join d in db.Descriptors on p.DescriptorID equals d.DescriptorID
where d.DescriptorID == intID
select new
{
Category = d.DescriptorDesc,
TypeCol = p.PPLType,
PartNumber = p.PartNum,
Status = p.PPLStatus,
StatusColor = p.PPLStatusBGColor,
REL = p.RELStatus,
RELColor = p.RELStatusBGColor
};
//Drop the parts into a List
List<GridPart> pl = new List<GridPart>();
foreach (var m in myParts)
{
GridPart gp = new GridPart();
gp.Category = m.Category;
gp.Type = m.TypeCol;
gp.PartNum = m.PartNumber;
gp.Status = m.Status;
gp.StatusColor = m.StatusColor;
gp.REL = m.REL;
gp.RELColor = m.RELColor;
pl.Add(gp);
}
var model = pl;
return PartialView(model);
}
[HttpPost]
public JsonResult Myajaxcall(string id)
{
int intID = Convert.ToInt32(id);
var types = from c in db.Types
where c.DescriptorID == intID
select new { did = c.DescriptorID, pType = c.pplType };
List<PPLType> typesList = new List<PPLType>();
foreach (var t in types)
{
PPLType p = new PPLType();
p.DescriptorID = t.did;
p.pplType = t.pType;
typesList.Add(p);
}
//string command = "EXEC dbo.pr_PPLDescriptor_list";
//List<int> results = db.Database.SqlQuery(int, command, null);
return Json(typesList, JsonRequestBehavior.AllowGet);
}
}
任何帮助将不胜感激.
推荐答案
好的，我明白了.因此，如上所述，要将新模型通过AJAX传递到局部视图，我将动作结果的返回值更新为:
OK, I got it. So, as stated above, to pass the new model via AJAX to the partial view I updated my action result's return to:
return PartialView("_GridView", model);
需要返回局部视图，并传递要传递给的局部视图的名称作为第一个参数，而要传递的模型作为第二个参数.
Need to return a partial view and pass in the name of the partial view you're passing to as the first parameter and the model you want to pass as the second parameter.
然后，为了刷新部分视图中数据表中的数据，我将其添加到了我的AJAX中:
Then, to refresh the data in the table of data in the partial view, I added this to my AJAX:
$('#theGrid').html(data);
$('#theGrid').html(data);
基本上，这就是更新包含表的div的内容.
Basically, this is what updates the div that contains the table.
感谢大家的所有评论.希望这对其他人有帮助.
Thanks everyone for all of your comments. Hope this is helpful to someone else.
这篇关于通过AJAX调用更新表中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
