[英]DropdownList Change Event, change the Kendo Grid Data
我想要通過更改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);
}
}
}
將網格放在部分視圖中,然后嘗試將數據從控制器發送到部分視圖,然后刷新部分視圖。 因此,首先創建局部視圖:
@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);;
}
檢查代碼的詳細信息,它們不准確!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.