2 つの要素から配列にスローする必要があり、それを jQuery.Ajax で MVC コントローラーに投稿できます。
私の問題は、MVC 部分ビューに渡すことができる許容可能な配列またはオブジェクトにそれらを配置する方法ですか?
btnMoveUpボタンと jQueryで機能すると思われるクラスのセットアップがあります。btnMoveDown
data-procedureid と data-sortid を 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>