2017-02-22 9 views
0

Мой взгляд отображается внешним javascript, а не в самом представлении. Как удалить несколько строк в jqgrid? У меня есть multiselect и multiboxonly установлен равным true. Вот мои кодыКак удалить несколько строк в Jqgrid MVC

View (вид отформатирован в "~/Scripts/TodoList.js")

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>TodoList</h2> 

<div> 
<table id="grid"></table> 
<div id="pager" 
</div> 

<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 

<a href="javascript:void(0)" id="m1">Get Selected id's</a> 

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" /> 
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" /> 


<script src="~/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
@*<script src="~/Scripts/jquery-1.12.4.min.js" type ="text/javascript"></script>*@ 
<script src="~/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script> 
<script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script> 
<script src="~/Scripts/TodoList.js" type="text/javascript"></script> 

Todolist.js (Jqgrid)

/* File Created: February 17, 2017 */ 
$(function() { 
    $("#grid").jqGrid({ 
     url: "/TodoList/GetTodoLists", 
     datatype: 'json', 
     mtype: 'Get',  
     colNames: ['Id', 'Task Name', 'Task Description', 'Target Date', 'Severity', 'Task Status'], 
     colModel: [ 
      { key: true, hidden: true, name: 'Id', index: 'Id', editable: true }, 
      { key: false, name: 'TaskName', index: 'TaskName', editable: true }, 
      { key: false, name: 'TaskDescription', index: 'TaskDescription', editable: true }, 
      { 
       key: false, name: 'TargetDate', id: "elem", index: 'TargetDate', editable: true, formatter: 'date', formatoptions: { newformat: 'd/m/Y' }, 
       editoptions: { dataInit: function (elem) { $(elem).datepicker(); } } 
      }, 
      { key: false, name: 'Severity', index: 'Severity', editable: true, edittype: 'select', editoptions: { value: { 'L': 'Low', 'M': 'Medium', 'H': 'High'}} }, 
      { key: false, name: 'TaskStatus', index: 'TaskStatus', editable: true, edittype: 'select', editoptions: { value: { 'A': 'Active', 'I': 'InActive'}}}], 
     pager: jQuery('#pager'), 
     rowNum: 10, 
     rowList: [10, 20, 30, 40], 
     height: '100%', 
     viewrecords: true, 
     // Bug Codes 
     // loadonce:true, //compulsory for search   
     //cellEdit: true,   //inline edits 
     //cellsubmit: 'clientArray', //inline edit 
     caption: 'Todo List', 
     sortname: 'id', 
     sortorder: 'desc', 
     multiselect: true, 
     multiboxonly: true, 
     emptyrecords: 'No records to display', 
     jsonReader: { 
      root: "rows", 
      page: "page", 
      total: "total", 
      records: "records", 
      repeatitems: false, 
      Id: "0" 
     }, 
     autowidth: true,   
    }).navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true }, //search: true  
     { 
      // edit options 
      zIndex: 100, 
      url: '/TodoList/Edit', 
      closeOnEscape: true, 
      closeAfterEdit: true, 
      recreateForm: true, 
      afterComplete: function (response) { 
       if (response.responseText) { 
        alert(response.responseText); 
       } 
      } 
     }, 
     { 
      // add options 
      zIndex: 100, 
      url: "/TodoList/Create", 
      closeOnEscape: true, 
      closeAfterAdd: true, 
      afterComplete: function (response) { 
       if (response.responseText) { 
        alert(response.responseText); 
       } 
      } 
     }, 
     { 
      //delete options 
      zIndex: 100, 
      url: "/TodoList/Delete" + , 
      closeOnEscape: true, 
      closeAfterDelete: true, 
      recreateForm: true, 
      msg: "Are you sure you want to delete this task?", 
      afterComplete: function (response) { 
       if (response.responseText) { 
        alert(response.responseText); 
       } 
      } 
     });     
}); 

Контроллер

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using System.Data; 
using TodoListApplication.DBContext; 
using TodoListApplication.Models; 

namespace TodoListApplication.Controllers 
{ 
    public class TodoListController : Controller 
    { 
     // 
     // GET: /TodoList/ 

     public ActionResult Index() 
     { 
      return View(); 
     } 
     TodoContext db = new TodoContext(); 
     public JsonResult GetTodoLists(string sidx, string sord, int page, int rows) //Gets the todo Lists. 
     { 
      int pageIndex = Convert.ToInt32(page) - 1; 
      int pageSize = rows; 
      var todoListsResults = db.TodoLists.Select(
        a => new 
        { 
         a.Id, 
         a.Severity, 
         a.TargetDate, 
         a.TaskDescription, 
         a.TaskName, 
         a.TaskStatus 
        }); 
      int totalRecords = todoListsResults.Count(); 
      var totalPages = (int)Math.Ceiling((float)totalRecords/(float)rows); 
      if (sord.ToUpper() == "DESC") 
      { 
       todoListsResults = todoListsResults.OrderByDescending(s => s.TaskName); 
       todoListsResults = todoListsResults.Skip(pageIndex * pageSize).Take(pageSize); 
      } 
      else 
      { 
       todoListsResults = todoListsResults.OrderBy(s => s.TaskName); 
       todoListsResults = todoListsResults.Skip(pageIndex * pageSize).Take(pageSize); 
      } 
      var jsonData = new 
      { 
       total = totalPages, 
       page, 
       records = totalRecords, 
       rows = todoListsResults 
      }; 
      return Json(jsonData, JsonRequestBehavior.AllowGet); 
     } 

     // TODO:insert a new row to the grid logic here 
     [HttpPost] 
     public string Create([Bind(Exclude = "Id")] TodoList objTodo) 
     { 
      string msg; 
      try 
      { 
       if (ModelState.IsValid) 
       { 
        db.TodoLists.Add(objTodo); 
        db.SaveChanges(); 
        msg = "Saved Successfully"; 
       } 
       else 
       { 
        msg = "Validation data not successful"; 
       } 
      } 
      catch (Exception ex) 
      { 
       msg = "Error occured:" + ex.Message; 
      } 
      return msg; 
     } 
     public string Edit(TodoList objTodo) 
     { 
      string msg; 
      try 
      { 
       if (ModelState.IsValid) 
       { 
        db.Entry(objTodo).State = EntityState.Modified; 
        db.SaveChanges(); 
        msg = "Saved Successfully"; 
       } 
       else 
       { 
        msg = "Validation data not successfull"; 
       } 
      } 
      catch (Exception ex) 
      { 
       msg = "Error occured:" + ex.Message; 
      } 
      return msg; 
     }  

     public string Delete(int Id) 
     { 
      TodoList todolist = db.TodoLists.Find(Id); 
      db.TodoLists.Remove(todolist); 
      db.SaveChanges(); 
      return "Deleted successfully"; 
     } 

    } 
} 

ответ

1

jqGrid отправляет список идентификаторов, разделенных запятыми, при удалении строк в multiselect: true режиме. Таким образом, вы должны изменить string Delete(int Id) на void Delete(string id). Соответствующий код может быть примерно следующее:

public void Delete(string id) 
{ 
    var ids = id.Split(','); 
    foreach (var id in ids) { 
     TodoList todolist = db.TodoLists.Find(int.Parse(id)); 
     db.TodoLists.Remove(todolist); 
    } 
    db.SaveChanges(); 
} 

Я рекомендую вам рассмотреть также использовать loadonce: true вариант и упростить ваше сотрудничество вернуть все элементов сразу. Это лучший сценарий при отображении небольшого количества строк (например, менее 1000). Это упростит ваш код сервера и повысит производительность (ответственность) сети.

Я бы рекомендовал вам дополнительно проверить, что вы используете последнюю версию free jqGrid (который вы можете загрузить с NuGet или загрузить непосредственно с CDN). Вы должны просмотреть параметры jqGrid, которые вы используете, и удалить ненужные или неправильные параметры/параметры.

+0

: «Ссылка на объект не установлена ​​в экземпляр объекта». Советы по устранению неполадок подсказывают, что я использую новое ключевое слово для создания экземпляра объекта. мой jqgrid также в его последней версии. – Jesse

+0

@Jesse: Это ошибка, которую вы получаете в коде C# (код на стороне сервера) или код JavaScript (код на стороне клиента). В какой строке кода вы получите ошибку? Вероятно, вам нужно переименовать параметр 'csvIds' в' id' (см. Обновленный код моего ответа)? – Oleg

+0

Извините за поздний ответ. Это был код C#, а вывод по-прежнему является именем, даже если я переименовал 'csvIds' в id. Я также отлаживал код, получается, что параметр «идентификатор строки» не получает значения ... – Jesse

0

Я решил свою проблему с помощью кодов @Oleg.

первый: я узнал, что имя идентификатора, который использует мой контроллер передать идентификатор «ID», в то время как мой метод удаления в моем контроллере говорит «Id»:

public string Delete(int Id) // < see this 
     { 
      TodoList todolist = db.TodoLists.Find(Id); 
      db.TodoLists.Remove(todolist); 
      db.SaveChanges(); 
      return "Deleted successfully"; 
     } 

click here to see the debug result, pay attention to Form Data Section

Таким образом, существует несоответствие имени между идентификатором, указанным контроллером, и идентификатором, указанным в моем методе удаления.

2nd: Итак, я изменил свой метод удаления в контроллере, чтобы стать:

public ActionResult Delete(string id) 
     { 
      var ids = id.Split(','); 
      foreach (var idsss in ids) 
      { 
       TodoList todolist = db.TodoLists.Find(int.Parse(idsss)); 
       db.TodoLists.Remove(todolist); 
      } 
      db.SaveChanges(); 

      var result = new { msg = "Deletion Successful ! " }; 
      return Json(result, JsonRequestBehavior.AllowGet); 
     } 

Теперь он работает сейчас, благодаря @Oleg!