DropdownList更改事件，更改Kendo网格数据

Question

我希望通过更改DropDownList，网格更新和填充新数据，下面您可以看到我的代码，我不知道如何在dropdownlist上运行事件以及如何将选定项目传递给控制器和更新我的网

这是我的看法：

  <div class="col-md-4"> 
      <div class="form-group"> 
       @Html.Label("questionnaireName", new {@class = "control-label col-md-3"}) 
       <div class="col-md-9" onclick=""> 
        @Html.DropDownList("questionnairesID", null, new {style = "width:162px;Height:25px"}) 
        @*@Html.ValidationMessageFor(model => model.questionnairesID)*@ 
       </div> 
      </div> 
     </div> 
<div> 
    @(Html.Kendo().Grid<Mehvar_New.Models.QuestionnaireDetail>() 
    .Name("grid") 
    .Columns(columns => 
    { 
    columns.Bound(c => c.QuestionText); 
    columns.Bound(c => c.Value); 
    columns.Command(command => {command.Destroy(); }).Width(180); 
    }) 
    .ToolBar(toolbar => { 
     toolbar.Create(); 
     toolbar.Save(); 
    }) 
    .Editable(editable => editable.Mode(GridEditMode.InCell)) 
    .Scrollable() 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .Batch(true) 
     .Model(model => model.Id(p => p.ID)) 
     .Read(read => read.Action("QuestionnaireDetail_Read", "QuestionGrid")) 
     .Create(create => create.Action("QuestionnaireDetail_Create", "QuestionGrid")) 
     .Update(update => update.Action("QuestionnaireDetail_Update", "QuestionGrid")) 
     .Destroy(destroy => destroy.Action("QuestionnaireDetail_Destroy", "QuestionGrid")) 
) 
) 

，这是我的控制器：

using System; 
using System.Collections.Generic; 
using System.Data; 
using System.Data.Entity; 
using System.Linq; 
using System.Net; 
using System.Web; 
using System.Web.Mvc; 
using Kendo.Mvc.Extensions; 
using Kendo.Mvc.UI; 
using Mehvar_New.Models; 

namespace Mehvar_New.Controllers 
{ 
    public class QuestionGridController : Controller 
    { 
    private proshat_94Entities db = new proshat_94Entities(); 

    public ActionResult Index() 
    { 
     Questionnaires questionnaires = new Questionnaires(); 
     Customer customer = new Customer(); 
     ViewBag.questionnairesID = new SelectList(db.Questionnaires, "QuestionnaireID", "QuestionnaireName"); 
     ViewBag.Code = new SelectList(db.Customer, "Code", "Name"); 
     return View(); 
    } 

    public ActionResult QuestionnaireDetail_Read([DataSourceRequest]DataSourceRequest request) 
    { 

     var questionnairedetail = db.QuestionnaireDetail.ToList(); ; 
     DataSourceResult result = questionnairedetail.ToDataSourceResult(request, questionnaireDetail => new 
     { 
      ID = questionnaireDetail.ID, 
      QuestionText = questionnaireDetail.QuestionText, 
      Value = questionnaireDetail.Value, 
     }); 

     return Json(result); 
    } 

    [AcceptVerbs(HttpVerbs.Post)] 
    public ActionResult QuestionnaireDetail_Create([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<QuestionnaireDetail> questionnairedetail) 
    { 
     var entities = new List<QuestionnaireDetail>(); 
     if (questionnairedetail != null && ModelState.IsValid) 
     { 
      foreach(var questionnaireDetail in questionnairedetail) 
      { 
       var entity = new QuestionnaireDetail 
       { 
         QuestionText = questionnaireDetail.QuestionText, 
         Value = questionnaireDetail.Value, 
       }; 

       db.QuestionnaireDetail.Add(entity); 
       entities.Add(entity); 
      } 
      db.SaveChanges(); 
     } 

     return Json(entities.ToDataSourceResult(request, ModelState)); 
    } 

    [AcceptVerbs(HttpVerbs.Post)] 
    public ActionResult QuestionnaireDetail_Update([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<QuestionnaireDetail> questionnairedetail) 
    { 
     var entities = new List<QuestionnaireDetail>(); 
     if (questionnairedetail != null && ModelState.IsValid) 
     { 
      foreach(var questionnaireDetail in questionnairedetail) 
      { 
       var entity = new QuestionnaireDetail 
       { 
        ID = questionnaireDetail.ID, 
        QuestionText = questionnaireDetail.QuestionText, 
        Value = questionnaireDetail.Value, 
       }; 

       entities.Add(entity); 
       db.QuestionnaireDetail.Attach(entity); 
       db.Entry(entity).State = EntityState.Modified;       
      } 
      db.SaveChanges(); 
     } 

     return Json(entities.ToDataSourceResult(request, ModelState)); 
    } 

    [AcceptVerbs(HttpVerbs.Post)] 
    public ActionResult QuestionnaireDetail_Destroy([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<QuestionnaireDetail> questionnairedetail) 
    { 
     var entities = new List<QuestionnaireDetail>(); 
     if (ModelState.IsValid) 
     { 
      foreach(var questionnaireDetail in questionnairedetail) 
      { 
       var entity = new QuestionnaireDetail 
       { 
        ID = questionnaireDetail.ID, 
        QuestionText = questionnaireDetail.QuestionText, 
        Value = questionnaireDetail.Value, 
       }; 

       entities.Add(entity); 
       db.QuestionnaireDetail.Attach(entity); 
       db.QuestionnaireDetail.Remove(entity); 
      } 
      db.SaveChanges(); 
     } 

     return Json(entities.ToDataSourceResult(request, ModelState)); 
    } 

    protected override void Dispose(bool disposing) 
    { 
     db.Dispose(); 
     base.Dispose(disposing); 
    } 
} 
} 

Answer 1

将您的网格放在部分视图中，并尝试将数据从控制器发送到局部视图，然后刷新局部视图。所以，首先要创建一个局部视图：

@model Mehvar_New.Models.QuestionnaireDetail 
<div> 
    @(Html.Kendo().Grid<>(Model) 
    .Name("grid") 
    .Columns(columns => 
    { 
    columns.Bound(c => c.QuestionText); 
    columns.Bound(c => c.Value); 
    columns.Command(command => {command.Destroy(); }).Width(180); 
    }) 
    .ToolBar(toolbar => { 
     toolbar.Create(); 
     toolbar.Save(); 
    }) 
    .Editable(editable => editable.Mode(GridEditMode.InCell)) 
    .Scrollable() 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .Batch(true) 
     .Model(model => model.Id(p => p.ID)) 
     .Read(read => read.Action("QuestionnaireDetail_Read", "QuestionGrid")) 
     .Create(create => create.Action("QuestionnaireDetail_Create", "QuestionGrid")) 
     .Update(update => update.Action("QuestionnaireDetail_Update", "QuestionGrid")) 
     .Destroy(destroy => destroy.Action("QuestionnaireDetail_Destroy", "QuestionGrid")) 
) 
) 
</div> 

然后在你的主视图创建局部视图div标签：

  <div class="col-md-4"> 
      <div class="form-group"> 
       @Html.Label("questionnaireName", new {@class = "control-label col-md-3"}) 
       <div class="col-md-9" onclick=""> 
        @Html.DropDownList("questionnairesID", null, new {style = "width:162px;Height:25px"}) 
        @*@Html.ValidationMessageFor(model => model.questionnairesID)*@ 
       </div> 
      </div> 
     </div> 
<div Id="MyGridDiv"> 
</div> 

你的部分观点方法然后添加到您的控制器：

[HttpGet] 
     public ActionResult MyGrid(Mehvar_New.Models.QuestionnaireDetail questionnaireDetail) 
     { 
      return PartialView("MyGrid"); 
     } 

然后你应该安排你的jQuery：

$('#qustionid').change(function() { 
     $.ajax({ 
      url: '/yourcontroller/QuestionnaireDetail_Read', 
      type: 'GET', 
      cache: false, 
      async: true, 
      data: { selectedValue = $(this).val(); }, 
     }) 
    .done(function (partialViewResult) { 
     $("#MyGridDiv").html(partialViewResult); 
    }) 
    } 
    else { 
     $("#MyGridDiv").html(""); 
    } 
}); 

现在你要改变你的控制器，如：

public ActionResult QuestionnaireDetail_Read(int selectedValue) 
    { 

     var questionnairedetail = db.QuestionnaireDetail.ToList(); ; 
     DataSourceResult result = questionnairedetail.ToDataSourceResult(request, questionnaireDetail => new 
     { 
      ID = questionnaireDetail.ID, 
      QuestionText = questionnaireDetail.QuestionText, 
      Value = questionnaireDetail.Value, 
     }); 

     return PartialView("MyGrid", questionnaireDetail);; 
    } 

代码的检查细节，他们是不准确的！