在值更改事件上使用Razor语法调用Ajax.ActionLink

时间：2015-04-20 08:55:22

标签： ajax asp.net-mvc razor

我有一个视图，其中我有一个标准供应商文本框，一个LastMonth下拉列表和一个月文本框。 

 @using JouleBrokerDB.ViewModels;
    @model AssignPayReportToDepositViewModel
    @{
      ViewBag.Title = "View";
    }
    <link href="@Url.Content("~/Content/kendo/kendo.common-bootstrap.min.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/kendo/kendo.bootstrap.min.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/kendo/kendo.dataviz.min.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/kendo/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" />
    <style>
      .treediv {
        display: inline-block;
        vertical-align: top;
        width: 440px;
        /*height:400px;*/
        min-height: 400px;
        text-align: left;
        margin: 0 2em;
        border-radius: 25px;
        border: 2px solid #8AC007;
        padding: 15px;
        overflow: auto;
      }
    </style>

    <div class="row">
      <div class="col-md-9 col-md-offset-1">
        @using (Html.BeginForm("Show", "AssignPayReportToDeposit", FormMethod.Post, new { id = "AssignToPayReportForm", @class = "form-horizontal" }))
        {
          <fieldset>

            <!-- Form Name -->
            <legend>Assign Pay Report to Deposit</legend>

            <div class="form-group">

              <!-- Supplier -->
              <div class="col-sm-4">
                @Html.Label("", "Supplier:", new { @class = "control-label", @for = "textinput" })
                <div id="suppliers">
                  @Html.DropDownListFor(x => x.SuppliersList, new SelectList(Model.SuppliersList, "SupplierID", "Name"), new { id = "ddSupplier", @class = "form-control" })
                </div>
              </div>

              <!-- Last Month -->
              <div class="col-sm-4">
                @Html.Label("", "Last Month:", new { @class = "control-label", @for = "textinput" })
                @Html.DropDownListFor(x => x.LastMonthsList, new SelectList(Model.LastMonthsList), new { @id = "ddLastMonth", @class = "form-control" })
              </div>

              <!-- Months-->
              <div class="col-sm-4">
                @Html.Label("", "Months:", new { @class = "control-label", @for = "textinput" })
                @Html.TextBox("txtMonths", null, new { type = "number", step = 1, min = 1, max = 12, @class = "form-control", required = "required" })
              </div>
            </div>
          </fieldset>

          <div class="treediv">
            @Html.Label("", "UnAssigned PayReport:", new { @class = "control-label", @for = "textinput" })
            <div id="TreeView_UPR" style="padding:5px"></div>
          </div>

          <div class="treediv">
            @Html.Label("", "Deposits:", new { @class = "control-label", @for = "textinput" })
            <h4></h4>
            <div id="TreeView_AD" style="padding:5px"></div>
          </div>
        }
      </div>
    </div>

    <script src="@Url.Content("~/Scripts/kendo/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/Views/AssignPayReportToDeposit/Show.js")"></script>

在这个文本框中，我通过jQuery附加了更改的事件。要求是每当条件改变时，树视图div将被填充数据将被刷新。 

AssignPayReportsToDeposit.AttachEvents = function () {
  $("#ddSupplier").change(AssignPayReportsToDeposit.OnSupplierChange);
  $("#ddLastMonth").change(AssignPayReportsToDeposit.OnLastMonthChange);
  $("#txtMonths").change(AssignPayReportsToDeposit.OnMonthsChange);
}

这些已更改的事件处理程序将处理刷新树视图。整个过程都是通过ajax调用来处理的。

现在我知道使用带有Replace选项的Ajax.ActionLink和UpdateTargetId参数我可以在局部视图中返回树视图，因此可以删除手动处理。但这需要我放置用户必须点击的锚点按钮。要求是应该在任何标准更改时刷新树视图。

有没有什么方法可以使用Ajax.ActionLink（或任何其他razor语法，将从手动处理中卸载）来实现这一点？在控件的更改事件中，我想使用ajax.actionlink调用控制器，它将返回一个partialview并更新div。

编辑：我现在通过jQuery处理这个问题。所以我会发布完整的代码以便更好地理解。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using JouleBrokerDB;
using JouleBrokerDB.ViewModels;
using JouleBroker.Filters;

namespace JouleBroker.Controllers
{
  [RoutePrefix("AssignPayReportToDeposit")]
  [Route("{action=Show}")]
  public class AssignPayReportToDepositController : Controller
  {
    // GET: AssignPayReportToDeposit
    //[Route("Show",Name = "APTDShow")]
    //[ValidateLogin]
    public ActionResult Show()
    {
      List<SupplierViewModel> suppliers = DBCommon.GetAllSuppliers(false);

      SuppliersList_LastMonthsList_ViewModel model = new SuppliersList_LastMonthsList_ViewModel()
      {
        SuppliersList = suppliers,
        LastMonthsList = new List<string>()
      };

      return View(model);
    }

    [HttpPost]
    [Route("GetUnAssignedPayReports")]
    public JsonResult GetUnAssignedPayReports(int SupplierID,
                                              string MonthPaid,
                                              int Months)
    {
      var payreports = AssignPayReportsToDepositData.GetUnAssignedPayReports(SupplierID,
                                                                             MonthPaid,
                                                                             Months);
      return Json(payreports);
    }

    [HttpPost]
    [Route("GetAssignedPayReports")]
    public JsonResult GetAssignedPayReports(int SupplierID,
                                            string MonthPaid,
                                            int Months)
    {
      var payreports = AssignPayReportsToDepositData.GetAssignedPayReports(SupplierID,
                                                                           MonthPaid,
                                                                           Months);
      return Json(payreports);
    }

    [HttpPost]
    [Route("AssignDepositIdToPayReport")]
    public bool AssignDepositIdToPayReport(int PayReportID, int DepositID)
    {
      return AssignPayReportsToDepositData.AssignDepositIdToPayReport(PayReportID, DepositID);
    }
  }
}

JavaScript文件（代码有点冗长，因此您不需要查看所有这些代码，您可以看到调用操作方法的方法.GetUnAssignedPayReports和GetAssignedPayReports返回用于填充的数据树视图。）我只是希望这部分移动到局部视图并将模型传递给局部视图生成树视图并在每次更改事件时再次替换div并再次渲染局部视图。希望我很清楚。所以改变上面的方法来返回部分而不是json结果，我想要实现的目标

function AssignPayReportsToDeposit() { }

AssignPayReportsToDeposit.SelectedSupplierID = 0;
AssignPayReportsToDeposit.SelectedLastMonth = null;
AssignPayReportsToDeposit.SelectedMonths = 0;

AssignPayReportsToDeposit.LastMonthsList = null;
AssignPayReportsToDeposit.UnAssignedPayReportsList = null;
AssignPayReportsToDeposit.AssignedPayReportsList = null;

AssignPayReportsToDeposit.LastTextChangedNode = null;
//--------- Document Ready Function -------- //
$(document).ready(function () {

  //AttachEvents
  AssignPayReportsToDeposit.AttachEvents();
});

AssignPayReportsToDeposit.AttachEvents = function () {
  $("#ddSupplier").change(AssignPayReportsToDeposit.OnSupplierChange);
  $("#ddLastMonth").change(AssignPayReportsToDeposit.OnLastMonthChange);
  $("#txtMonths").change(AssignPayReportsToDeposit.OnMonthsChange);
}

//Handles Supplier ChangeEvents
AssignPayReportsToDeposit.OnSupplierChange = function () {
  //Get Changed Supplier ID
  AssignPayReportsToDeposit.SelectedSupplierID = $('#ddSupplier').val();
  //Get Last Month List
  AssignPayReportsToDeposit.LastMonthsList = CommonAction.GetLastPayReportMonthsBySupplierID(AssignPayReportsToDeposit.SelectedSupplierID);
  //Fill Last Month List
  AssignPayReportsToDeposit.FillLastMonths();
  //Refresh TreeView_UPR
  AssignPayReportsToDeposit.RefreshTreeViewUPR();
  //Refresh TreeView_AD
  AssignPayReportsToDeposit.RefreshTreeViewAD();
}

//Handles Last Month Change Event
AssignPayReportsToDeposit.OnLastMonthChange = function () {
  AssignPayReportsToDeposit.SelectedLastMonth = $('#ddLastMonth').val();
  //Refresh TreeView_UPR
  AssignPayReportsToDeposit.RefreshTreeViewUPR();
  //Refresh TreeView_AD
  AssignPayReportsToDeposit.RefreshTreeViewAD();
}

//Handles Month Change Event
AssignPayReportsToDeposit.OnMonthsChange = function () {
  AssignPayReportsToDeposit.SelectedMonths = $('#txtMonths').val();
  //Refresh TreeView_UPR
  AssignPayReportsToDeposit.RefreshTreeViewUPR();
  //Refresh TreeView_AD
  AssignPayReportsToDeposit.RefreshTreeViewAD();
}

//Fills Last Month Dropdown with options
AssignPayReportsToDeposit.FillLastMonths = function () {
  var ddLastMonth = $("#ddLastMonth");
  if (ddLastMonth != undefined) {
    ddLastMonth.empty();
    if (AssignPayReportsToDeposit.LastMonthsList != undefined) {
      $.each(AssignPayReportsToDeposit.LastMonthsList, function () {
        Common.AddOptionToSelect(ddLastMonth, this.Text, this.Text);
      });
      ddLastMonth.val(AssignPayReportsToDeposit.LastMonthsList[0].Text);
      AssignPayReportsToDeposit.SelectedLastMonth = ddLastMonth.val();
    }
  }
}

AssignPayReportsToDeposit.ValidateControls = function () {
  var success = true;
  if (AssignPayReportsToDeposit.SelectedSupplierID == undefined ||
      AssignPayReportsToDeposit.SelectedSupplierID == 0) {
    //  bootbox.alert('Please select a Supplier');
    success = false;
  }
  else if (AssignPayReportsToDeposit.SelectedLastMonth == undefined ||
          AssignPayReportsToDeposit.SelectedLastMonth == '') {
    //   bootbox.alert('Please select Last Month');
    success = false;
  }
  else if (AssignPayReportsToDeposit.SelectedMonths == undefined ||
          AssignPayReportsToDeposit.SelectedMonths == 0) {
    //  bootbox.alert('Please Enter Months');
    success = false;
  }
  return success;
}

//Assigns DepositIdToPayReport
AssignPayReportsToDeposit.AssignDepositIdToPayReport = function (PayReportID, DepositID) {
  var success = false;
  if (PayReportID != undefined && DepositID != undefined) {
    var jsonData = JSON.stringify({ PayReportID: PayReportID, DepositID: DepositID });
    $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: 'AssignPayReportToDeposit/AssignDepositIdToPayReport',
      data: jsonData,
      async: false,
      success: function (result) {
        success = result;
      },
      error: Common.AjaxErrorHandler
    });
  }
  return success;
}

//--------- Tree View  UPR Functions -------- //
//Gets UnAssigned Pay Reports
AssignPayReportsToDeposit.GetUnAssignedPayReports = function () {
  var payReports;
  if (AssignPayReportsToDeposit.ValidateControls()) {
    var jsonData = JSON.stringify(
      {
        SupplierID: AssignPayReportsToDeposit.SelectedSupplierID,
        MonthPaid: AssignPayReportsToDeposit.SelectedLastMonth,
        Months: AssignPayReportsToDeposit.SelectedMonths
      });

    $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: "AssignPayReportToDeposit/GetUnAssignedPayReports",
      data: jsonData,
      async: false,
      success: function (data) {
        if (data != undefined && data != "")
          payReports = data;
      },
      error: Common.AjaxErrorHandler
    });
  }
  return payReports;
}

AssignPayReportsToDeposit.BindTreeViewUPR = function () {
    var treeview = $("#TreeView_UPR");

    var inline = new kendo.data.HierarchicalDataSource({
      data: AssignPayReportsToDeposit.UnAssignedPayReportsList,
      schema: {
        model: {
          id: "PayReportID"
        }
      }
    });

    treeview.kendoTreeView({
      dragAndDrop: true,
      dataSource: inline,
      dataBound: function (e) {
        if (!this.dataSource.data().length) {
          this.element.append("<p class='no-items'>No items yet.</p>");
        } else {
          this.element.find(".no-items").remove();
        }
      },
      dataTextField: ["DisplayValue"],
      drop: AssignPayReportsToDeposit.OnTreeViewUPRDrop
    });
}

AssignPayReportsToDeposit.OnTreeViewUPRDrop = function (e) {
  var isTargetTreeViewAD = false;
  var sourceDataItem = this.dataItem(e.sourceNode);
  var targetDataItem = this.dataItem(e.destinationNode);
  if (targetDataItem == undefined) {
    targetDataItem = $("#TreeView_AD").data("kendoTreeView").dataItem(e.destinationNode);
    isTargetTreeViewAD = true;
  }

  if (sourceDataItem == undefined ||
      targetDataItem == undefined) {
    //Source and target both must exists
    e.preventDefault();
    return;
  }

  if (sourceDataItem.IsDeposit == true) {
    //Deposits cannot be drag and Drop
    e.preventDefault();
    return;
  }

  if (isTargetTreeViewAD) {
    if (e.dropPosition == "over" &&
        sourceDataItem.IsPayReport == true &&
        sourceDataItem.IsAssignedPayReport == false &&
        targetDataItem.IsDeposit == true) {
      //Source must UnAssigned Payreport Target Must be Deposit and Drop position must over 
      //Implement logic to assign deposit id to the Pay Report
      var PayReportID = sourceDataItem.PayReportID;
      var DepositID = targetDataItem.DepositID;
      if (AssignPayReportsToDeposit.AssignDepositIdToPayReport(PayReportID, DepositID)) {
        sourceDataItem.set("DepositID", DepositID);
        sourceDataItem.set("IsAssignedPayReport", true);
      }
      else {
        //Didnt update the record don't do the drop
        e.preventDefault();
        return;
      }
    }
    else {
      e.preventDefault();
      return;
    }
  }
  else {
    if ((e.dropPosition == "before" || e.dropPosition == "after") &&
          sourceDataItem.IsPayReport == true &&
          targetDataItem.IsPayReport == true &&
          targetDataItem.IsAssignedPayReport == false) {
      //Only allow sorting in this condition otherwise cancel drop event
      //Means only allow sorting of unassigned payreports within the tree
    }
    else {
      e.preventDefault();
      return;
    }
  }
}

AssignPayReportsToDeposit.RefreshTreeViewUPR = function () {
  //Destroy and empty tree
  var treeview = $("#TreeView_UPR").data("kendoTreeView");
  if (treeview != undefined) { treeview.destroy(); }
  treeview = $("#TreeView_UPR");
  treeview.empty();

  AssignPayReportsToDeposit.UnAssignedPayReportsList = AssignPayReportsToDeposit.GetUnAssignedPayReports();

  AssignPayReportsToDeposit.BindTreeViewUPR();
}

//--------- TreeView_AD Functions -------- //
//Gets Assigned Pay Reports
AssignPayReportsToDeposit.GetAssignedPayReports = function () {
  var payReports;
  if (AssignPayReportsToDeposit.ValidateControls()) {
    var jsonData = JSON.stringify(
      {
        SupplierID: AssignPayReportsToDeposit.SelectedSupplierID,
        MonthPaid: AssignPayReportsToDeposit.SelectedLastMonth,
        Months: AssignPayReportsToDeposit.SelectedMonths
      });

    $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: "AssignPayReportToDeposit/GetAssignedPayReports",
      data: jsonData,
      async: false,
      success: function (data) {
        if (data != undefined && data != "")
          payReports = data;
      },
      error: Common.AjaxErrorHandler
    });
  }
  return payReports;
}

AssignPayReportsToDeposit.BindTreeViewAD = function () {
    var treeview = $("#TreeView_AD");

    var inline = new kendo.data.HierarchicalDataSource({
      data: AssignPayReportsToDeposit.AssignedPayReportsList,
      schema: {
        model: {
          id: "DepositID",
          hasChildren: "HasAnyAssignedPayReports",
          children: "AssignedPayReports"
        }
      }
    });

    treeview.kendoTreeView({
      dragAndDrop: true,
      dataSource: inline,
      dataBound: function (e) {
        if (!this.dataSource.data().length) {
          this.element.append("<p class='no-items'>No items yet.</p>");
        } else {
          this.element.find(".no-items").remove();
        }
      },
      dataTextField: ["DisplayValue", "DisplayValue"],
      drop: AssignPayReportsToDeposit.OnTreeViewADDrop,
      select: AssignPayReportsToDeposit.OnTreeViewADSelect
    });
}
AssignPayReportsToDeposit.OnTreeViewADSelect = function (e) {
  var dataItem = this.dataItem(e.node);
  var treeview = this;

  if (AssignPayReportsToDeposit.LastTextChangedNode != undefined) {
    //Restore last node's Text
    var previousDataItem = this.dataItem(AssignPayReportsToDeposit.LastTextChangedNode);
    if (previousDataItem != undefined) {
      var date = AssignPayReportsToDeposit.FormatDepositMonthToDisplay(previousDataItem.DepositDate);
      var displaytext = "[" + date + "]" + "-[" + previousDataItem.BankName + "]-" + "[" + previousDataItem.Amount + "]";
      this.text(AssignPayReportsToDeposit.LastTextChangedNode, displaytext);
    }
    AssignPayReportsToDeposit.LastTextChangedNode = undefined;
  }
  if (dataItem.IsDeposit) {
    if (dataItem.hasChildren > 0) {
      dataItem.set("expanded", true);
      //Append  sum to selected node's diplay value
      var childs = dataItem.children.data();
      var sum = 0;
      $.each(childs, function () { sum += this.Amount });
      var date = AssignPayReportsToDeposit.FormatDepositMonthToDisplay(dataItem.DepositDate);
      var displaytext = "[" + date + "]" + "-[" + dataItem.BankName + "]-" + "[" + dataItem.Amount + "(" + sum + ")" + "]";
      this.text(e.node, displaytext)
      AssignPayReportsToDeposit.LastTextChangedNode = e.node;
    }
  }
}

AssignPayReportsToDeposit.FormatDepositMonthToDisplay = function (jsondate) {
  var depositedate = "";
  if (jsondate != undefined && jsondate != "") {
    var date = Common.ParseDate(jsondate);
    var month = ("0" + (date.getMonth() + 1)).slice(-2);
    depositedate = date.getFullYear() + "-" + (month);
  }
  return depositedate;
}

AssignPayReportsToDeposit.OnTreeViewADDrop = function (e) {
  var isTargetTreeViewURP = false;
  var DroptoNoItemZone = false;
  var sourceDataItem = this.dataItem(e.sourceNode);
  var targetDataItem = this.dataItem(e.destinationNode);
  var treeview_UPR = $("#TreeView_UPR").data("kendoTreeView");
  if (targetDataItem == undefined) {
    targetDataItem = treeview_UPR.dataItem(e.destinationNode);
    if (treeview_UPR.element.find(".no-items").length > 0) DroptoNoItemZone = true;
    isTargetTreeViewURP = true;
  }

  if ((sourceDataItem == undefined ||
       targetDataItem == undefined) && DroptoNoItemZone == false) {
    e.preventDefault();
    return;
  }

  if (sourceDataItem.IsDeposit == true) {
    //Deposits can not be moved within the tree view
    e.preventDefault();
    return;
  }

  if (isTargetTreeViewURP) {
    if (((e.dropPosition == "before" || e.dropPosition == "after") &&
          sourceDataItem.IsPayReport == true &&
          sourceDataItem.IsAssignedPayReport == true &&
          targetDataItem.IsPayReport == true) || (e.dropPosition == "over" && DroptoNoItemZone)) {
      //Implement logic to unassing deposit id to PayReport
      var PayReportID = sourceDataItem.PayReportID;
      var DepositID = 0;
      if (AssignPayReportsToDeposit.AssignDepositIdToPayReport(PayReportID, DepositID)) {
        sourceDataItem.set("DepositID", DepositID);
        sourceDataItem.set("IsAssignedPayReport", false);
      }
      else {
        //Didnt update the record don't do the drop
        e.preventDefault();
        return;
      }
    }
    else {
      e.preventDefault();
      return;
    }
  }
  else {
    if (e.dropPosition == "over" &&
        sourceDataItem.IsPayReport == true &&
        targetDataItem.IsDeposit == true) {
      //Implement Logic to change deposit ID for assigned payreport
      var PayReportID = sourceDataItem.PayReportID;
      var DepositID = targetDataItem.DepositID;
      if (AssignPayReportsToDeposit.AssignDepositIdToPayReport(PayReportID, DepositID)) {
        sourceDataItem.set("DepositID", DepositID);
        sourceDataItem.set("IsAssignedPayReport", true);
      }
      else {
        //Didnt update the record don't do the drop
        e.preventDefault();
        return;
      }
    }
    else {
      e.preventDefault();
      return;
    }
  }
}

AssignPayReportsToDeposit.RefreshTreeViewAD = function () {
  //Destroy and empty tree
  var treeview = $("#TreeView_AD").data("kendoTreeView");
  if (treeview != undefined) { treeview.destroy(); }
  treeview = $("#TreeView_AD");
  treeview.empty();

  AssignPayReportsToDeposit.LastTextChangedNode = undefined;

  AssignPayReportsToDeposit.AssignedPayReportsList = AssignPayReportsToDeposit.GetAssignedPayReports();

  AssignPayReportsToDeposit.BindTreeViewAD();
}

1 个答案:

答案 0 :(得分：2)

不幸的是没有开箱。

Ajax扩展方法实际上只是HTML帮助程序，可以与其他jQuery库一起使用。帮助程序创建relavant HTML标记（例如添加自定义addtributes data-*=""），客户端脚本使用它来确定它们的行为。

您可以创建自己的MVC HTML帮助程序和脚本库来处理更改事件，但我建议您查看前端框架，例如Angular。该库将以声明方式处理所有事件，因此您无需浪费时间编写事件处理程序。

相关问题
最新问题