基于主视图自定义过滤器更新局部视图

Question

代码搜索视图和部分结果视图

搜索视图

  @model Shared.Model.Search.GLSearch
@{

    ViewData["Title"] = "Search GL";
}
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">UBold</a></li>
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li>
                    <li class="breadcrumb-item active">Elements</li>
                </ol>
            </div>
            <h4 class="page-title">Search Customer</h4>

        </div>
    </div>
</div>
<!-- end page title -->



<form asp-action="" asp-controller="" method="post">

    <div class="row">
        <div class="col-lg-12">
            <div class="card-box">
                <div class="form-row">


                    <div class="form-group col-md-2">
                        <label asp-for="Name" class="col-form-label"></label>
                        <input asp-for="Name" type="text" class="form-control" />

                    </div>
                    <div class="form-group col-md-2">
                        <label asp-for="Code" class="col-form-label"></label>
                        <input asp-for="Code" type="text" class="form-control" />

                    </div>
                    <div class="form-group col-md-3">
                        <label asp-for="GLSectionId" class="col-form-label">Section </label>
                        <select asp-for="GLSectionId" asp-items="@(new SelectList(Model.glSections,"Id","Name"))" class="form-control">
                            <option value="">Choose</option>

                        </select>
                    </div>
                    <div class="form-group col-md-3">
                        <label asp-for="GLGroupId" class="col-form-label">Group</label>
                        <select asp-for="GLGroupId" asp-items="@(new SelectList(Model.glGroups,"Id","Name"))" class="form-control">
                            <option value="">Choose</option>

                        </select>
                    </div>

                    <button type="button" id="search" class="btn btn-primary waves-effect waves-light">Search</button>

                </div>



            </div> <!-- end card-box -->


        </div> <!-- end col -->

    </div> <!-- end row -->



</form>

<div id="view-all"></div>
    

Search_PartiaView

@model PagedResult<Shared.Model.Masters.GLMaster.GLViewModel>
@{

}


@if (Model == null || Model.RowCount == 0)
{
    <p>No results found</p>
}
else
{

    <div class="col-lg-12">
        <div class="card-box">
            <h4 class="header-title">Customers</h4>
            <p class="sub-header">

            </p>

            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th data-priority="1">#</th>
                            <th data-priority="3">Name</th>
                            <th data-priority="6">Code</th>
                            <th data-priority="6">Section</th>
                            <th data-priority="6">Group</th>
                            <th data-priority="6">
                                <a onclick="showInPopup('@Url.Action("AddOrEditGL","GLMaster",new {area = "Masters"},Context.Request.Scheme)','New GL')" class="btn btn-success text-white"><i class="fas fa-random"></i> New GL</a>
                            </th>

                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model.Results)
                        {
                        <tr>
                            <th scope="row">@item.Id</th>
                            <td>@item.Name</td>
                            <td>@item.Code</td>
                            <td>@item.GLSection</td>
                            <td>@item.GLGroup</td>
                            <td>
                                <div>
                                    <a onclick="showInPopup('@Url.Action("AddOrEditGL","GLMaster",new { area= "Masters",id = item.Id},Context.Request.Scheme)','Update GL')" class="btn btn-info text-white"><i class="fas fa-pencil-alt"></i> Edit</a>
                                    <form  asp-area="Masters"  asp-action="DeleteGL" asp-route-id="@item.Id" onsubmit="return jQueryAjaxDelete(this)" class="d-inline">
                                        <input type="submit" value="Delete" class="btn btn-danger" />
                                    </form>
                                </div>
                            </td>

                        </tr>

                        }

                    </tbody>
                </table>
            </div> <!-- end table-responsive-->

        </div> <!-- end card-box -->
    </div> <!-- end col -->
    <!-- Responsive Table js -->



}

局部视图 (AddEditGL)

@model Shared.Model.Masters.GLMaster.GLModel
@{
    Layout = null;
    ViewData["Title"] = "Add Customer";
}

<div class="row">
    <div class="col-lg-12">
        <div class="card-box">
            <form asp-action="AddOrEditGL" asp-controller="GLMaster" asp-area="Masters" asp-route-id="@Model.Id" onsubmit="return jQueryAjaxPost(this);">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <input type="hidden" asp-for="@Model.Id" />
              

                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label asp-for="Name" class="control-label"></label>
                            <input asp-for="Name" type="text" class="form-control">
                            <span asp-validation-for="Name" class="text-danger"></span>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label asp-for="NameLang" class="control-label"></label>
                            <input asp-for="NameLang" type="text" class="form-control">
                            <span asp-validation-for="NameLang" class="text-danger"></span>
                        </div>
                    </div>


                </div>

           

                <div class="form-group">
                    <div class="col-md-6 offset-md-3">
                        <input type="submit" value="Submit" class="btn btn-primary btn-block" />
                    </div>
                </div>


            </form>

        </div> <!-- end card-box -->


    </div> <!-- end col -->

</div> <!-- end row -->

我有部分视图的视图（用于表中的结果）。当我单击 Search_PartiaView 中的编辑按钮时 我需要打开弹出窗口（部分视图 (AddEditGL)） 并且数据应该加载ajax并在更新后提交按钮..我需要在弹出窗口中使用jquery不显眼的验证，也不需要刷新页面..请让我知道如何做..谢谢

编辑

我已经实现了类似这个Ajax crud popup

我有主视图和部分视图。还有 AddOrEdit View 用于 Add/edit Master。

我当前的解决方案有效。但在我的主视图中，我有基于 2 个字段的过滤器。

添加/编辑网格后加载所有结果，但如果应用了过滤器，我还需要过滤网格..

我的 Javascript 代码在这里：

jQueryAjaxPost = form => {
    try {
        $.ajax({
            type: 'POST',
            url: form.action,
            data: new FormData(form),
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.isValid) {
                    $('#view-all').html(res.html)    --- here actually data coming all without filter                
                    $('#form-modal .modal-body.p-4').html('');
                    $('#form-modal .modal-title').html('');
                    $('#form-modal').modal('hide');
                    showAll(4, 1);   ---  it is the javascript fuction call  to call the
 api again
                }
                else
                    $('#form-modal .modal-body.p-4').html(res.html);
            },
            error: function (err) {
                console.log(err)
            }
        })
        //to prevent default form submit event
        return false;
    } catch (ex) {
        console.log(ex)
    }
}

控制器：

 [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> AddOrEditGL(int id,GLModel glModel)
        {
            if (ModelState.IsValid)
            {

                var mappedGL = _mapper.Map<GLDTO>(glModel);
                //Insert
                if (id == 0)
                {                 
                    await _glService.CreateGL(mappedGL);                  
                }
                //Update
                else
                {
                    await _glService.UpdateGL(mappedGL);
                    //Call Update
                }

               // How do i filter  the based on Main view  form controls
                  
                return Json(new { isValid = true, html = Helper.RenderRazorViewToString(this, "_GLViewAll", null) });
            }
            return Json(new { isValid = false, html = Helper.RenderRazorViewToString(this, "AddOrEditGL", glModel) });
        }

我当前的解决方案再次调用 api（2 个服务器调用）一个用于更新，另一个用于调用更新表..我需要在单个调用中执行相同操作..请帮忙吗？

注意：我不需要完整的解决方案，我只需要如何获取 AddOrEditGL Controller post 方法 Main view form control text fieds text to filter in DB

Answer 1

如果你想在一个请求中更新/添加并显示搜索到的数据，快速的方法是将SearchGLPartial代码复制到AddOrEditGL函数并传递pageSize、pageIndex、name、code、GLSectionId和GlGroupId通过 ajax：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> AddOrEditGL(int id,GLModel glModel,string name,string code,string GLSectionId,string GlGroupId...)
{
    if (ModelState.IsValid)
    {
        var mappedGL = _mapper.Map<GLDTO>(glModel);
        //Insert or
        //Update
        //copy the SearchGLPartial code here and return view with data
    }
    return Json(new { isValid = false, html = Helper.RenderRazorViewToString(this, "AddOrEditGL", glModel) });
}

如果您只是不想删除 showViewAll() jquery，我认为您可以在首次搜索 SearchGLPartial 操作中的数据时为过滤条件设置会话。然后在您的 AddOrEdit 操作中，获取会话并设置正确的 url。最后，您可以在 ajax 成功响应中获取 url：

 public IActionResult SearchGLPartial(string name,string code,string GLSectionId,string GLGroupId)
{
    HttpContext.Session.SetString("name", name);
    HttpContext.Session.SetString("code", code);
    HttpContext.Session.SetString("GLSectionId", GLSectionId);
    HttpContext.Session.SetString("GLGroupId", GLGroupId);
    var data = Gllist.Where(a => a.Name.Contains(name) & a.Code.Contains(code)).FirstOrDefault();//filter by yourself
    return PartialView("_Search", data);
}

添加或编辑：

 [HttpPost]
 [ValidateAntiForgeryToken]
 public async Task<IActionResult> AddOrEditGL(int id,GLModel glModel)
 {
        if (ModelState.IsValid)
        {
            //Insert
            //Update
            var name = HttpContext.Session.GetString("name");
            //other session data...
            return Json(new { isValid = true, url="Home/Index?name="+name+"&code="+xxx+"&...."});
        }
        return Json(new { isValid = false, html = Helper.RenderRazorViewToString(this, "AddOrEditGL", glModel) });
 }

然后是你的 ajax：

success: function (res) {
         if (res.isValid) {
               window.location.href = response.url;  
}
         else
              $('#form-modal .modal-body.p-4').html(res.html);
},

Answer 2

我推荐使用 jQuery Unobtrusive AJAX 库。它非常易于使用：

它可以使用 data-ajax-update="#panel"

<a href="" data-ajax="true" data-ajax-url="/GetEditModal" data-ajax-update="#panel" data-ajax-success="SuccessCallback">Click here</a>

<div id="panel"></div>

这是一个返回模态的控制器动作示例：

public IActionResult GetEditModal() => Partial("ViewName");

然后当模态框被放置在你的容器中时，使用data-ajax-success 属性调用一个回调方法，使用jQuery Unobtrusive Validation 解析表单，如下所示：

function SuccessCallback() {
   //You can also use the keyword "this" instead of getting the form with jquery
   $.validator.unobtrusive.parse($(this));
   //or
   $.validator.unobtrusive.parse($form);
}

非常有用的资源：@​​987654321@ - jQuery Unobtrusive AJAX - GitHub

更新

我在以前的项目中所做的是包含一个空的编辑模式（带有空主体的模式），然后使用库和 data-ajax-update 每次用户按下编辑按钮时，我都会替换该模式的主体像这样的表格项：

<div class="modal fade" id="eModal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content id="modalContentE">
            <div class="modal-header">
                <h4 class="modal-title"><i class="nav-icon fas fa-edit"></i> Edit Data</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fas fa-times-circle text-white"></i></span>
                </button>
            </div>  
            //New data goes here   
        </div>
    </div>
</div>

并且您的添加模态将是一个常规的完整模态，并且每次用户使用它提交数据时，清除表单。