retrieve data and call controller method on page load

Question

I am trying to explain my problem/condition in steps.

1. I have a view page showing tabular data. On button press, it retrieves id of the row and calls javascript function.
2. This javascript function, getDetails(id) has to call another view page, say Application.cshtml.
3. I have to pass the value of id to this view page Application.cshtml.
4. I am trying to pass this as query string.
5. Now in this view page Application.cshtml, I have to retrieve the value of id and call contoller method to show the details of the id on page load.
6. Is it possible to do using jquery/ajax? function getDetails(id) {
   var id_ = id; window.location = "/FirmModels/Application/" + id_;
   }

My problem is how can I retrieve the value of id and call controller method on page load using javascript in Application.cshtml?

Answer 1

Hi @arsar ,

how can I retrieve the value of id and call controller method on page load using javascript in Application.cshtml?

According to your setups, there is no need to retrieve the id value in the step 5 and call the method to get the detail data in the Application.cshtml page. You can do it in the step 2, in the getDetails function, you can use JQuery Ajax to transfer the id value to the Detail action method, then, in the Detail action method, you can filter data based on the id value, and return the related view. Finally, in the Ajax success function, get the returned details page, and show it.

More detail steps, you could refer the following sample: in this sample, I will show the Customer List in the index page, and after click the Details button, it will call the Details action method, and returns a PV_Details partial view, finally, I will show the detail page using Boostrap Popup Modal.

Create a Customer model:

public class Customer  
{  
    [Key]  
    public int ID { get; set; }  
    public string LastName { get; set; }  
    public string FirstMidName { get; set; }  
    public DateTime EnrollmentDate { get; set; }  
}  

after migration and generate the related table, in the Customer controller, we could add the following code:

public class CustomerController : Controller  
{  
    private readonly ApplicationDbContext _dbcontext;  
    public CustomerController(ApplicationDbContext context)  
    {  
        _dbcontext = context;  
    }  
    // Index action: display all customer list.  
    public IActionResult Index()  
    {   
        return View(_dbcontext.Customers.ToList());  
    }  
    // base on the primary key to get the special customer.  
    public IActionResult Details(int id)  
    {   
        if(id != 0)  
        {  
            var item = _dbcontext.Customers.Where(c => c.ID == id).FirstOrDefault();  
            // return a partial view with model  
            return PartialView("PV_Details",item);  
        }  
        else  
        {  
            return Json(new { status = "failed", message = "id is invalid" });  
        }   
    }  
}  

Index.cshtml page code:

Create a Partial view with this code:

The result as below:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion