[英]DropdownList Change Event, change the Kendo Grid Data
I want by changing the DropDownList, grid update and fill with new data, Below you can see my code, I dont know how run event on dropdownlist and how pass the selected item to the controller and the update my grid 我想要通过更改DropDownList,更新网格并填充新数据,在下面可以看到我的代码,我不知道如何在dropdownlist上运行事件以及如何将所选项目传递给控制器并更新我的网格
this is my View: 这是我的观点:
<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"))
)
)
and this is my Controller: 这是我的控制器:
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);
}
}
}
Put your grid inside partial view and try to send data from controller to partial view, then refresh partial view. 将网格放在部分视图中,然后尝试将数据从控制器发送到部分视图,然后刷新部分视图。 So first create a partial view: 因此,首先创建局部视图:
@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>
Then create a div tag for partial view in your main view: 然后在主视图中为部分视图创建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>
Then add your partial view method to your controller: 然后将局部视图方法添加到控制器中:
[HttpGet]
public ActionResult MyGrid(Mehvar_New.Models.QuestionnaireDetail questionnaireDetail)
{
return PartialView("MyGrid");
}
Then you should arrange your jQuery: 然后,您应该安排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("");
}
});
Now you should change your controller like: 现在,您应该像下面那样更改控制器:
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);;
}
Check details of the codes, They aren't accurate!. 检查代码的详细信息,它们不准确!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.