2015-12-16 51 views
0

自学MVC,所以我想完成的第一个项目是一个使用引导程序模式窗体一个简单的CRUD应用程序。使用PagedList.MVC自举模式的局部模板问题

我试图让我的要求这个学习项目作为实战尽可能......因此

  • 搜索与分页(理想情况下自动完成,如在无需提交按钮)
  • 保持当前搜索参数
  • CRUD模式表单或
  • 通过AJAX潜在装?

我已经基本融合以下项目的2成工作中的应用。

我有几个问题与应用程序...首先,我HttpPostActionResult,如果我回到PartialView( “_ DetailPaged”),该_DetailPage部分告诉我,模型为null。因为_detailPage正在寻找PagedList.IPagedList的典范,我theorectially必须从索引操作重新运行该代码。

因此,我试着返回RedirectToAction(“索引”),它工作,只要模型能够正确加载,但是,因为我正在重新加载我的视图,某些UI的部分会重复。

理想情况下,我想能够加载通过AJAX搜索,并只更新部分细节。
我想允许用户搜索该表,而不使用提交按钮,因此上述要求,最后,我希望能够与搜索参数返回查询,即使是编辑后或添加。

作为奖励,我要清理的搜索查询仅返回数据的一个子集,即这10条记录,与中小企业样书签至于如何查询一个或下一个10

任何建议将不胜感激。

我查看

<div id="main-div"> 
<div class="clearfix">&nbsp;</div> 
<div class="clearfix">&nbsp;</div> 
<div class="container"> 

    <a href="@Url.Action("Add", "MVCPager2")" id="Add" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i>&nbsp;Create New</a> 
    <div id="div-record"> 
     @Html.Partial("_DetailPaged", Model)  
    </div> 
</div> 

<div class="modal fade" id="Add-Model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title">New Student</h4> 
      </div> 
      <div class="divForAdd"> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="modal fade" id="Edit-Model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title">Update Student</h4> 
      </div> 
      <div class="divForUpdate"> 
      </div> 
     </div> 
    </div> 
</div> 

管窥

@model PagedList.IPagedList<Employee> 
@using PagedList.Mvc; 

@using (Html.BeginForm("Index", "MVCPager", FormMethod.Get)) 

     { 
      <p> 
       Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string) 

       <input type="submit" value="Search" /> 
      </p> 
     } 
<div class="table-responsive"> 
<table class="table table-bordered table-striped"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Age</th> 
      <th>Edit</th> 
      <th>Delete</th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach (var item in Model) 
     { 
      <tr> 
       <td> 
        @Html.DisplayFor(modelItem => item.FirstName) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.LastName) 
       </td> 
       <td> 
        <a href="@Url.Action("Edit", "Home", new { ID = item.EmployeeID })" class="editDialog"><i class="fa fa-pencil-square-o"></i>&nbsp;Edit</a> 
       </td> 
       <td> 
        @Ajax.ActionLink("Delete", "Delete", "Home", new { @ID = item.EmployeeID }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "div-record" }, new { @class = "fa fa-trash-o" }) 
       </td> 
      </tr> 
     } 
    </tbody> 
</table> 
<br /> 
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount 

@Html.PagedListPager(Model, page => Url.Action("Index", 
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })) 

</div> 

<script> 
$(document).ready(function() { 
    $('#Add').click(function (event) { 
     event.preventDefault(); 
     $.get(this.href, function (response) { 
      $('.divForAdd').html(response); 
     }); 
     $('#Add-Model').modal({ 
      backdrop: 'static', 
     }, 'show'); 
    }); 
    $('.editDialog').click(function (event) { 
     event.preventDefault(); 
     $.get(this.href, function (response) { 
      $('.divForUpdate').html(response); 
     }); 
     $('#Edit-Model').modal({ 
      backdrop: 'static', 
     }, 'show'); 
    }); 
}); 
</script> 

我的控制器

public ActionResult Index(string sortOrder, string currentFilter, string searchString, int? page) 
    { 
     ViewBag.CurrentSort = sortOrder; 
     ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "name_desc" : ""; 
     ViewBag.DateSortParm = sortOrder == "Date" ? "date_desc" : "Date"; 

     if (searchString != null) 
     { 
      page = 1; 
     } 
     else 
     { 
      searchString = currentFilter; 
     } 

     ViewBag.CurrentFilter = searchString; 

     IEnumerable<Employee> Employees; 
     using (NorthwindEntities ctx = new NorthwindEntities()) 
     { 
      Employees = ctx.Employees.ToList(); 
     } 

     if (!String.IsNullOrEmpty(searchString)) 
     { 
      Employees = Employees.Where(s => s.LastName.Contains(searchString) 
            || s.FirstName.Contains(searchString)); 
     } 

     int pageSize = 10; 
     int pageNumber = (page ?? 1);    
     return View(Employees.ToPagedList(pageNumber, pageSize)); 
    } 

    public ActionResult Add() 
    { 
     return PartialView("_AddPaged"); 
    } 

    [HttpPost] 
    public ActionResult Add(Employee model) 
    { 
     List<Employee> Employees = new List<Employee>(); 
     if (ModelState.IsValid) 
     { 
      using (NorthwindEntities ctx = new NorthwindEntities()) 
      { 
       Employee _employee = new Employee 
       { 
        FirstName = model.FirstName, 
        LastName = model.LastName 
       }; 
       ctx.Employees.Add(_employee); 

       try 
       { 
        ctx.SaveChanges(); 
       } 
       catch (DbEntityValidationException ex) 
       { 
        // Retrieve the error messages as a list of strings. 
        var errorMessages = ex.EntityValidationErrors 
          .SelectMany(x => x.ValidationErrors) 
          .Select(x => x.ErrorMessage); 

        // Join the list to a single string. 
        var fullErrorMessage = string.Join("; ", errorMessages); 

        // Combine the original exception message with the new one. 
        var exceptionMessage = string.Concat(ex.Message, " The validation errors are: ", fullErrorMessage); 

        // Throw a new DbEntityValidationException with the improved exception message. 
        throw new DbEntityValidationException(exceptionMessage, ex.EntityValidationErrors); 
       } 
       Employees = ctx.Employees.ToList(); 
      } 
     } 
     return RedirectToAction("Index"); 
     //return PartialView("_DetailPaged"); 
    } 

回答

0

使用这个JavaScript您的机型弹出完成。

做一个App.js在脚本 和复制下面的代码出现。

MyApp的。js

$(document).ready(function() { 
    $('#add').click(function (event) { 
     event.preventDefault(); 
     $.get(this.href, function (response) { 
      $('.divForAdd').html(response); 
     }); 
     $('#Add-Model').modal({ 
      backdrop: 'static', 
     }, 'show'); 
    }); 


    $('.openDialog-Edit').click(function (event) { 
     event.preventDefault(); 
     $.get(this.href, function (response) { 
      $('.divForCreate').html(response); 
     }); 

     $('#Edit-Model').modal({ 
      backdrop: 'static', 
     }, 'show'); 

    }); 

    $('.openDialog-Delete').click(function (event) { 
     event.preventDefault(); 
     $.get(this.href, function (response) { 
      $('.divForDelete').html(response); 
     }); 

     $('#Delete-Model').modal({ 
      backdrop: 'static', 
     }, 'show'); 

    }); 
});