Kendo ui grid не удается отменить встроенное редактирование в aspnet mvc

#asp.net #asp.net-mvc #kendo-ui #kendo-ui-grid

#asp.net #asp.net-mvc #kendo-ui #kendo-ui-grid

Вопрос:

В последнее время я столкнулся с неприятной проблемой. Я использую kendi ui Grid на asp.net mvc … проблема, с которой я сталкиваюсь, заключается в том, что когда я включаю режим редактирования сетки и добавляю команду редактирования и идентификатор модели, кажется, все работает, но есть проблемы. Сначала он не выполняет действие редактирования на контроллере, затем, если я отменю редактирование, строка исчезнет!

Это моя модель

 public class ContactInformation
{
    [Key]
    [ScaffoldColumn(false)]
    public long ContactInfoId { get; set; }

    public string Position { get; set; }

    [Required]
    public string Name { get; set; }

    public string PhoneNumber { get; set; }

    public string CodeToPerson { get; set; }

    public string Fax { get; set; }

    public string CellPhoneNumber { get; set; }

    public string Email { get; set; }

    public virtual Client Client { get; set; }
}
  

Это контроллер

 public class ContactsController : Controller
{
    private ApplicationDbContext db = new ApplicationDbContext();

    // GET: dashboard/Contacts
    public ActionResult Default(string id)
    {
        if(id != null)
        {
            ViewBag.clientGuid = id;

            var model = db.Clients.SingleOrDefault(x=>x.ClientGuid == id);
            model.BillingAddresses = db.BillingAddresses.Where(x => x.Client.ClientId == model.ClientId).ToList();
            return View(model);
        }
        return View();
    }        

    public ActionResult Contacts_Read([DataSourceRequest]DataSourceRequest request, string id)
    {
        var contacts = (id != null) ?
                            db.ContactInfos.Where(x => x.Client.ClientGuid == id).ToList() :
                            db.ContactInfos.ToList();

        return Json(GetContacts(contacts).ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult Contacts_Create([DataSourceRequest]DataSourceRequest request,ContactInformation model)
    {
        // Todo: save the model

        return Json(ModelState.ToDataSourceResult());
    }

    [HttpPost]
    public ActionResult Contacts_Update([DataSourceRequest]DataSourceRequest request, ContactInformation model)
    {
        if(model != null)
        {
            var contactToUpdate = db.ContactInfos.Find(model.ContactInfoId);
            contactToUpdate.Name = model.Name;
            contactToUpdate.Position = model.Position;
            contactToUpdate.PhoneNumber = model.PhoneNumber;
            contactToUpdate.CodeToPerson = model.CodeToPerson;
            contactToUpdate.CellPhoneNumber = model.CellPhoneNumber;
            contactToUpdate.Fax = model.Fax;
            contactToUpdate.Email = model.Email;
            contactToUpdate.Client = db.Clients.Find(model.Client.ClientId);

            db.SaveChanges();

        }

        return Json(ModelState.ToDataSourceResult());
    }

    public IEnumerable<ContactInformation> GetContacts(List<ContactInformation> contacts)
    {
        return contacts.Select(contactInfo => new ContactInformation
        {
            Position = contactInfo.Position,
            Name = contactInfo.Name,
            PhoneNumber = contactInfo.PhoneNumber,
            CodeToPerson = contactInfo.CodeToPerson,
            Fax = contactInfo.Fax,
            CellPhoneNumber = contactInfo.CellPhoneNumber,
            Email = contactInfo.Email,
            Client = new Client()
            {
                CompanyName = contactInfo.Client.CompanyName,
                IndustryCategory = contactInfo.Client.IndustryCategory,
                IndustrySubCategory = contactInfo.Client.IndustrySubCategory
            }
        });
    }
}
  

Это представление

  @(Html.Kendo().Grid<ContactInformation>().Name("Contacts")
        .Columns(
            columns.Bound(c => c.Client.IndustryCategory).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
            columns.Bound(c => c.Client.IndustrySubCategory).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
            columns.Bound(c => c.Name).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
            columns.Bound(c => c.Position).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
            columns.Bound(c => c.PhoneNumber).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
            columns.Bound(c => c.CodeToPerson).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
            columns.Bound(c => c.CellPhoneNumber).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
            columns.Bound(c => c.Fax).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
            columns.Bound(c => c.Email).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
            columns.Command(command =>
            {
                command.Edit();                    
            }).Width(100);
        })
        .ToolBar(tools =>
        {
            tools.Excel();
        })
        .Excel(excel => excel
            .FileName("ContactsData.xlsx")
            .Filterable(true)
            .ProxyURL(Url.Action("Excel_Export_Save"))
        )
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .Pageable(pageable => pageable
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5))
        .Scrollable()
        .Sortable()
        .Groupable()
        .Events(events=>events.Cancel("error_handler"))
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .HtmlAttributes(new { style = "height:500px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(Model=> {
                Model.Id(c => c.ContactInfoId);
                Model.Field(c => c.Client.IndustryCategory).Editable(false);
                Model.Field(c => c.Client.IndustrySubCategory).Editable(false);
            })
            //.Create(create => create.Action("Contacts_Create", "Contacts"))
            .Read(read => read.Action("Contacts_Read", "Contacts", new { id = ViewBag.clientGuid }))
            .Update(update => update.Action("Contacts_Update", "Contacts", new { id = ViewBag.clientGuid }))
            .PageSize(20)
        )
        .ColumnMenu()
)



<script type="text/javascript">
function error_handler(e) {
    if (e.errors) {
        var message = "Errors:n";
        $.each(e.errors, function (key, value) {
            if ('errors' in value) {
                $.each(value.errors, function() {
                    message  = this   "n";
                });
            }
        });
        alert(message);
    }
}
</script>
  

Интересно, что в проекте есть другая модель под названием «запрос», которая имеет сетку, аналогичную этой, и она работает довольно нормально. На самом деле, они совершенно идентичны, но я не мог понять, почему это работает не так, как другое!

Ответ №1:

Первое, что я вижу здесь, это то, что вашим методом в контроллере является HttpPost, но в определении функции обновления (в Telerik grid) вы ее не указали. Это означает, что grid пытается запустить редактор по умолчанию — и это HttpGet -> вот почему обновление не запускается.

Вам нужно определить, что методом обновления является Post

 .Update(update => update.Action("Contacts_Update", "Contacts", new { id = ViewBag.clientGuid }).Type(HttpVerbs.Post))
  

Комментарии:

1. Я добавил это в свой javascript, и кнопка отмены теперь исправлена. $("#ContactsGrid").data("kendoGrid").cancelChanges(); Теперь, если я отредактирую строку, это приведет к неправильному методу действия! Он вызывает метод create .. событие, хотя HttpVerbs.Post добавляется в Update команду в grid

2. В вашем методе чтения вы вызываете getContacts (контакты) . Метод getContacts возвращает данные, но ContactInfoId отсутствует. Попробуйте добавить его, чтобы grid знал, какую запись следует отредактировать. Если поле ID отсутствует, grid думает, что вы пытаетесь вставить новую строку.