在另一个视图上获取剑道网格的选定值

Get selected value of Kendo grid on another View

本文关键字：网格 另一个 视图 获取      更新时间：2023-09-26

所以昨天我开始为一个项目学习javascript和web开发。我们使用的是MVC模式，我在弄清楚javascript类如何与视图协同工作时遇到了问题。如有任何帮助，我们将不胜感激。正如我所说，我的知识非常有限。然而，我确实知道C#和WPF（MVVM），所以也许其中的一些知识会对我有所帮助。

我们使用剑道控制。下面是我们剑道网格的一些javascript。

grid.js:

function onChange(e) {
        //get currently selected dataItem
        var grid = e.sender;
        var selectedRow = grid.select();
        var dataItem = grid.dataItem(selectedRow);
        var y = $.ajax({
            url: "/api/ServiceOrderData/" + dataItem.id,
            type: 'GET',
            dataType: 'json'
       });
    }
    $("#serviceOrderList").kendoGrid({
        groupable: true,
        scrollable: true,
        change: onChange,
        sortable: true,
        selectable: "row",
        resizable: true,
        pageable: true,
        height: 420,
        columns: [
            { field: 'PriorityCodeName', title: ' ', width: 50 },
            { field: 'ServiceOrderNumber', title: 'SO#' },
            { field: 'ServiceOrderTypeName', title: 'Type' },
            { field: 'ScheduledDate', title: 'Scheduled Date' },
            { field: 'StreetNumber', title: 'ST#', width: '11%' },
            { field: 'StreetName', title: 'Street Name' },
            { field: 'City', title: 'City' },
            { field: 'State', title: 'ST.' },
            { field: 'IsClaimed', title: 'Claimed'}
        ],
        dataSource: serviceOrderListDataSource
    });

我希望能够使用onChange函数的值：

 var dataItem = grid.dataItem(selectedRow);

在以下视图中。

ESRIMapView.cshtml:

<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'sidebar', gutters:false"
         style="width:100%; height:100%;">
        <div id="leftPane"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region:'left'">
            <br>
            <textarea type="text" id="address" />*THIS IS WHERE I WILL USE dataItem! dataItem.StreetNumber (syntax?) to be exact</textArea>
            <br>
            <button id="locate" data-dojo-type="dijit/form/Button">Locate</button>
        </div>
        <div id="map"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region:'center'">
        </div>
    </div>
</body>

现在，当用户单击index.cshtml屏幕上的一个按钮时，我的ESRIMapView就会加载，该屏幕包含我试图从中获取值的网格。

    <li>@Html.ActionLink("Map", "ESRIMapView", "Home", null, new { @class = "k-button" })</li>

这是我的"主页"控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Services.Description;
using Alliance.MFS.Data.Client.Models;
using Alliance.MFS.Data.Local.Repositories;
namespace AllianceMobileWeb.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";
            return View();
        }
        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";
            return View();
        }
        public ActionResult ServiceOrderMaintenance()
        {
            ViewBag.Message = "Your contact page.";
            return View();
        }
        public ActionResult ESRIMapView()
        {
            ViewBag.Message = "Your contact page.";
            return View();
        }
    }
}

我意识到这可能是一个非常初级的问题，但如果有任何帮助，我将不胜感激。请尽可能详细地回答：）

因为在将（初始）视图返回给用户之前创建了链接，所以需要一些技巧来更改它。我建议如下：在a元素上设置一个id并更改其href属性；在控制器上，设置与街道编号相对应的参数，并预填充视图：

控制器：

public ActionResult ESRIMapView(string streetNumber)
{
    ViewBag.Message = "Your contact page.";
    ViewBag.StreetNumber = streetNumber;
    return View();
}

包含li的视图（注意a元素上的Id）：

<li>@Html.ActionLink("Map", "ESRIMapView", "Home", null, new { @class = "k-button", id="myMapaction" })</li>

包含textarea的视图（ESRIMapView）:

<textarea type="text" id="address" />@ViewBag.StreetNumber</textArea>

grid.js:

function onChange(e) {
    //get currently selected dataItem
    var grid = e.sender;
    var selectedRow = grid.select();
    var dataItem = grid.dataItem(selectedRow);
    //change the link
    var actionElem = $("#myMapaction");
    var url = actionElem.attr("href");
    if (url.indexOf("=") === -1) { //first time selecting a row
       url += "?streetNumber=" + dataItem.StreetNumber;
    } else {
       url = url.substring(0, url.lastIndexOf("=") +1) + dataItem.StreetNumber;
    }
    actionElem.attr("href", url);
    //change the link
    var y = $.ajax({
        url: "/api/ServiceOrderData/" + dataItem.id,
        type: 'GET',
        dataType: 'json'
   });
}

此脚本只是在查询字符串中添加街道编号参数。当用户第一次选择一行时，查询字符串中不存在streetNumber参数。第一次之后，参数就在那里，我们必须只更改值。

请注意，此解决方案有其局限性：如果查询字符串中有其他参数（必须更改添加/编辑参数的逻辑），则不起作用。

相关文章：