0

我需要从 2 个元素到一个数组中的任意位置，然后我可以将 jQuery.Ajax 发布到我的 MVC 控制器。

我的问题是如何将它们放入可接受的数组或对象中，然后我可以将其传递给 MVC 局部视图？

我有类设置，我认为适用于按钮和 jQuery btnMoveUp，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>
4

1 回答 1

1

我现在实际上（字面上）正在编写这样的代码。我正在使用 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
}
于 2013-09-11T20:39:02.133 回答