简体   繁体   English

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

[英]Get selected value of Kendo grid on another View

So yesterday I started learning javascript and web development for a project at work. 所以昨天我开始学习一个项目的JavaScript和Web开发。 We are using a MVC pattern and I am having issues figuring out exactly how the javascript classes work with the views. 我们正在使用MVC模式,但是在弄清楚javascript类如何与视图一起工作时遇到了问题。 Any help on this will be appreciated. 任何帮助,将不胜感激。 Like I said, my knowledge is very limited. 就像我说的那样,我的知识非常有限。 I do, however, know C# and WPF (MVVM) so maybe some of that knowledge will help me here. 但是,我确实了解C#和WPF(MVVM),所以也许其中的一些知识会对我有所帮助。

We use Kendo controls. 我们使用剑道控件。 Some of the javascript for our kendo grid is below. 下面是我们kendo网格的一些JavaScript。

grid.js: 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
    });

I am wanting to be able to use the value from the onChange function: 我希望能够使用onChange函数中的值:

 var dataItem = grid.dataItem(selectedRow);

in the following view. 在以下视图中。

ESRIMapView.cshtml: 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>

Right now my ESRIMapView is loaded when the user clicks on a button on the index.cshtml screen which contains the grid that I am trying to get the value from. 现在,当用户单击index.cshtml屏幕上的按钮时,我的ESRIMapView已加载,该屏幕包含我试图从中获取值的网格。

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

This is my "Home" controller: 这是我的“家庭”控制器:

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();
        }
    }
}

I realize this is probably a very elementary question, but any help would be appreciate. 我意识到这可能是一个非常基本的问题,但是可以提供任何帮助。 And please be as detailed as possible with your responses :) 并且请尽可能详细地回答:)

Since you create your link before returning the (initial) view to the user, you need a bit of trickery to change it. 由于您是在将(初始)视图返回给用户之前创建链接的,因此需要一些技巧来更改它。 I recommend the following: set an id on your a element and change its href attribute; 我提出以下建议:您在设置一个id a元素并改变其href属性; on your controller, set a parameter corresponding to the street number and pre-fill the view: 在您的控制器上,设置与街道编号相对应的参数,并预先填充视图:

Controller: 控制器:

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

    ViewBag.StreetNumber = streetNumber;

    return View();
}

View containing the li (note the Id on the a element): 包含li视图(注意a元素上的ID):

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

View containing the textarea (ESRIMapView ): 包含textarea视图(ESRIMapView):

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

grid.js: 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'
   });
}

This script simply adds the street number parameter in the query string. 该脚本仅在查询字符串中添加街道编号参数。 When the user selects a row for the first time, the streetNumber parameter is not present in the query string. 当用户第一次选择行时,查询字符串中不存在streetNumber参数。 After the first time, the parameter is there and we must change only the value. 第一次之后,参数就在那里了,我们只能更改值。

Please note that this solution has its limitations: it does not work if you have other parameters in the query string (the logic for adding/editing the parameter must be changed). 请注意,这个解决方案也有其局限性:如果您在查询字符串其他参数(添加/编辑参数的逻辑必须改变)这行不通的。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM