Update the partia view based on Main view custom filters

Question

Code searchView and PartialResultView

SearchView

  @model Shared.Model.Search.GLSearch
@{

    ViewData["Title"] = "Search GL";
}


    
        
            
                
                    UBold
                    Forms
                    Elements
                
            
            Search Customer

        
    







    
        
            
                


                    
                        
                        

                    
                    
                        
                        

                    
                    
                        Section 
                        
                    
                    
                        Group

Search_PartiaView

@model PagedResult
@{

}


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

    
        
            Customers
            

            

            
                
                        @foreach (var item in Model.Results)
                        {
                        

                        }

                    
                    
                        
                            #
                            Name
                            Code
                            Section
                            Group
                            
                                 New GL
                            

                        
                    
                    
                            @item.Id
                            @item.Name
                            @item.Code
                            @item.GLSection
                            @item.GLGroup
                            
                                
                                     Edit
                                    
                                        
                                    
                                
                            

                        
                
            
 

        
 
    
 
    



}

Partial View (AddEditGL)

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

I have View with Partial view (is for results in table) . When i click Edit button in Search_PartiaView i need to open popup (Partial View (AddEditGL)) and data should be loaded ajax and submit the button after update.. I need to use jquery unobtrusive validation in popup and also without refresh the page ..Please let me know hw to do..Thanks

EDIT

I Have implemented similar to this Ajax crud popup

I Have Main view and Partial view. Also AddOrEdit View for Add/edit Master.

My Current solution works.. But inmy main view i have filter based on 2 filds.

After add/edit grid load all the result but if filter applied i also need to filter the grid ..

My Javascript code Here:

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 AddOrEditGL(int id,GLModel glModel)
        {
            if (ModelState.IsValid)
            {

                var mappedGL = _mapper.Map(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) });
        }

my Current solution call the api again ( 2 server calls) one for update and another for call update table .. i need to do the same in single call ..Please help to do?

Note: I dont need complete solution , I only need to how to get the AddOrEditGL Controller post method Main view form control text fieds text to filter in DB

user_6843077 · Answer

I recommend using the jQuery Unobtrusive AJAX library. Its very easy to use:

It can fetch partial views and place them in a container of your choice using the data-ajax-update="#panel"

Click here

This is an example of a controller action that would return the modal:

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

Then when the modal is placed in your container, using the data-ajax-success attribute a callback method is called, parse the form using the jQuery Unobtrusive Validation like this:

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);
}

Very useful resources : Link - jQuery Unobtrusive AJAX - GitHub

Update

What i did in previous projects is to include an empty edit modal (a modal with an empty body) then using the library and the data-ajax-update i would replace the body of that modal every time the user pressed the edit button on a table item like this:


    
        
            
                 Edit Data
                
              
            //New data goes here

And your add Modal would be a regular full modal and each time the user use it to submit data, clear the form.

user_11398810 · Answer

If you want to update/add and show the searched data in one request,The quick way is to copy the SearchGLPartial code to the AddOrEditGL function and pass the pageSize,pageIndex,name,code,GLSectionId and GlGroupId by ajax:

[HttpPost]
[ValidateAntiForgeryToken]
public async Task AddOrEditGL(int id,GLModel glModel,string name,string code,string GLSectionId,string GlGroupId...)
{
    if (ModelState.IsValid)
    {
        var mappedGL = _mapper.Map(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) });
}

If you just do not want to remove showViewAll() jquery,I think you could set session for the filter condition when you first search the data in SearchGLPartial action.Then in your AddOrEdit action,get the session and set the correct url.Finally,you could get the url in ajax success response:

 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);
}

AddOrEdit:

 [HttpPost]
 [ValidateAntiForgeryToken]
 public async Task 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) });
 }

Then your ajax:

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

Update the partia view based on Main view custom filters

2 Answers