c# - 根据主视图自定义过滤器更新局部 View

标签 c# jquery asp.net-core

代码 searchView 和 PartialResultView
搜索查看

  @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 -->



}
部分 View (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 -->
我有部分 View 的 View (用于表中的结果)。当我单击 中的“编辑”按钮时Search_PartiaView
我需要打开弹出窗口(部分 View (AddEditGL))
和数据应该加载ajax并在更新后提交按钮..我需要在弹出窗口中使用jquery不显眼的验证并且不刷新页面..请让我知道怎么做..谢谢
编辑
我已经实现了与此类似的 Ajax crud popup
我有主 View 和局部 View 。还有用于添加/编辑母版的 AddOrEdit View 。
我当前的解决方案有效.. 但在我的主 View 中,我有基于 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)
    }
}
Controller :
 [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 方法主 View 表单控件文本字段在 DB 中过滤的文本

最佳答案

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

[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 中的数据时为过滤条件设置 session 。操作。然后在您的 AddOrEdit 操作中,获取 session 并设置正确的 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);
},

关于c# - 根据主视图自定义过滤器更新局部 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63845894/

相关文章:

asp.net-web-api - 用于 WebAPI 的 MVC favicon.ico 路由

c# - UseExceptionHandler Blazor 服务器端

c# - 查找数组中最常见的元素

c# - 在 UWP 中读取 XML 文件时如何明确指定类型参数

javascript - 如何让不同尺寸的div在屏幕上居中

jquery - 使用 HTML 内容调整 shadowbox 的大小

c# - 匹配美元金额的正则表达式

c# - 如何将 int 设置为 byte* C#

javascript - 如何从 froala 编辑器中获取文本数据?

c# - 自定义setter添加多对多关系.net core