将元素放入数组中，然后我可以将其传递给我的 MVC 分部视图
本文关键字：我的 MVC 视图 我可以 元素 数组 然后 | 更新日期: 2023-09-27 18:30:55
我需要将 2 个元素中的任何元素扔到一个数组中，然后我可以将 jQuery.Ajax 发布到我的 MVC 控制器。
我的问题是如何将它们放入可接受的数组或对象中，然后我可以传递给 MVC 部分视图？
我有类设置，我认为将适用于按钮和jQuery btnMoveUp，btnMoveDown
我需要将数据过程 ID 和数据排序 ID 传递给我的 MVC 控制器。
对于奖励积分，我想我会坚持下去。 如果他们点击"上移"按钮。 我需要抓取它上面的元素并切换它们的排序顺序。 或者"下移"按钮需要抓住它下面的元素并切换它们的排序顺序。
我希望这会像jQuery(".btnMoveDown").next(".btnMoveDown").attr("data-sortorder")一样简单，但我还没有测试过这种可能性。
这是我未来的ajax：
$(".btnMoveUp").click(function () {
var currSortOrder = jQuery(this).data('sortorder');
// find the element above this one and grab the sort order
// switch the sort orders
$.ajax({
url: "YourController/GetData",
type: "get",
data: // What can I pass here that my MVC partial view can then use?
success: function (result) {
$("#procedures").html(result);
}
});
}
这是代码：
<ul class="commentlist">
@{
int i = 1;
//foreach (var item in @Model.IPACS_Processes.IPACS_Procedures)
foreach (var item in @Model.IPACS_Procedures)
{
<li class="span6">
<img src="../../Images/thumbs/doc.png" alt="" class="pull-left" />
<div class="comment-info">
<h4>
<a href="@Url.Action("ViewProcedure", new { id = item.procedureID })">
@item.name</a></h4>
<h5>
<small>Owner: </small><a href="javascript:void(0);">@item.owner</a></h5>
<br />
<p>
@item.description
</p>
<br />
<p>
@if (i > 1)
{
<a href="javascript:void(0);" class="btn btn-small btnMoveUp" data-procedureid="@item.procedureID" data-sortorder="@i"><span class="iconfa-double-angle-up icon-white">
</span>Move Up</a>
}
@if (i < @Model.IPACS_Procedures.Count)
{
<a href="javascript:void(0);" class="btn btn-small btnMoveDown" data-procedureid="@item.procedureID" data-sortorder="@i"><span class="iconfa-double-angle-down">
</span>Move Down</a>
}
@{i++;}
</p>
</div>
</li>
<br style="clear: both;" />
}
}
</ul>
在这里生成：
<ul class="commentlist">
<li class="span6">
<img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
<div class="comment-info">
<h4>
<a href="/MasterList/ViewProcedure/123">
XYZ Process Server</a></h4>
<h5>
<small>Owner: </small><a href="javascript:void(0);">Some Dude</a></h5>
<br>
<p>
Enter Description for XYZProcess Server Procedure
</p>
<br>
<p>
<a href="javascript:void(0);" class="btn btn-small btnMoveDown" data-procedureid="122" data-sortorder="1"><span class="iconfa-double-angle-down">
</span>Move Down</a>
</p>
</div>
</li>
<br style="clear: both;">
<li class="span6">
<img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
<div class="comment-info">
<h4>
<a href="/MasterList/ViewProcedure/122">
XYZ2 Process Server</a></h4>
<h5>
<small>Owner: </small><a href="javascript:void(0);">Some Dude</a></h5>
<br>
<p>
Enter Description for XYZ2 Process Server Procedure
</p>
<br>
<p>
<a href="javascript:void(0);" class="btn btn-small btnMoveUp" data-procedureid="123" data-sortorder="2"><span class="iconfa-double-angle-up icon-white">
</span>Move Up</a>
<a href="javascript:void(0);" class="btn btn-small btnMoveDown" data-procedureid="123" data-sortorder="2"><span class="iconfa-double-angle-down">
</span>Move Down</a>
</p>
</div>
</li>
<br style="clear: both;">
<li class="span6">
<img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
<div class="comment-info">
<h4>
<a href="/MasterList/ViewProcedure/121">
XYZ3 Process Server</a></h4>
<h5>
<small>Owner: </small><a href="javascript:void(0);">Some Dude</a></h5>
<br>
<p>
Enter Description for XYZ3 Process Server Procedure
</p>
<br>
<p>
<a href="javascript:void(0);" class="btn btn-small btnMoveUp" data-procedureid="124" data-sortorder="3"><span class="iconfa-double-angle-up icon-white">
</span>Move Up</a>
<a href="javascript:void(0);" class="btn btn-small btnMoveDown" data-procedureid="124" data-sortorder="3"><span class="iconfa-double-angle-down">
</span>Move Down</a>
</p>
</div>
</li>
<br style="clear: both;">
<li class="span6">
<img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
<div class="comment-info">
<h4>
<a href="/MasterList/ViewProcedure/120">
XYZ4 Process Server</a></h4>
<h5>
<small>Owner: </small><a href="javascript:void(0);">Some Dude</a></h5>
<br>
<p>
Enter Description for XYZ4 Process Server Procedure
</p>
<br>
<p>
<a href="javascript:void(0);" class="btn btn-small btnMoveUp" data-procedureid="125" data-sortorder="4"><span class="iconfa-double-angle-up icon-white">
</span>Move Up</a>
</p>
</div>
</li>
<br style="clear: both;">
</ul>
我现在实际上（字面意思）正在编写这样的代码。 我正在使用jQuery UI进行拖放重新排序。 （此代码可能与大多数其他代码示例略有不同）。
jQuery/javascript
$(document).ready(function ()
{
$(".ui-sortable-container").sortable({
handle: ".handle",
stop: function (event, ui)
{
AJAX.postRouteUpdate();
}
});
var AJAX =
{
postRouteUpdate: function ()
{
// create object that matches MVC object
// not case sensitive
var request = {};
request.routeIDs = [];
var selector = ".ui-routes .ui-route";
// for each of my objects grab the routeid
// this is the new order of the routeids
// send them all in, it's just easier on the backend
// and allows for future multiple re-sorts before
// sending the request to the server
$(selector).each(function (index)
{
request.routeIDs.push($(this).data('routeid'));
// update the title value, as I have mine numbered
$(this).find('.title').text((index + 1).toString());
});
$.ajax({
url: '/Routes/UpdateSequence',
data: JSON.stringify(request),
type: 'GET',
success: function (result) {
$("#procedures").html(result);
}
});
}};
型：
public class RouteUpdateModel()
{
public IEnumerable<int> RouteIDs { get; set; }
}
控制器
public ActionResult UpdateSequence(RouteUpdateModel model)
{
this.db().UpdateSequence(model.RouteIDs);
return this.Partial(model);
}
视图
@Model RouteUpdateModel
@foreach (var routeID in model.RouteIDs)
{
//do whatever
}