Refresh a div on an ASP MVC page with a controller action without the need to reload the entire page

Question

Refresh a div on an ASP MVC page with a controller action without the need to reload the entire page

In my controller, I have implemented the following action:

public ActionResult TestItemLogistic()
    {
        ControlViewModel model = new ControlViewModel();
        model.itemSelected = "Logistic";
        return RedirectToAction("MenuList", model);

    }

When I click on a

<a <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec849e898ad1ac999e80c2ad8f98858382">[email protected]</a>(subItem.action, subItem.controller)>

I want the functionality to be executed without reloading the entire page, simply updating specific div elements.

Do you have any suggestions or ideas?

Thank you.

jquery asp.net-mvc-3 razor controller

Answer 1

Answer №1

If you want to achieve this task, consider utilizing Ajax in conjunction with jQuery. You can find detailed information on jQuery ajax by visiting the following link: http://api.jquery.com/jQuery.ajax/

Answer 2

If you want to achieve this task, consider utilizing Ajax in conjunction with jQuery. You can find detailed information on jQuery ajax by visiting the following link: http://api.jquery.com/jQuery.ajax/

Answer 3

Answer №2

Utilize .load to update the content within the chosen element(s) with the HTML response fetched from a specified URL.

For instance:

<a href="@url.Action(subItem.action, subItem.controller)" id="ClickMe">Click Here</a>
<div id="ReplaceMe"></div>

This can be achieved as follows:

<script type="text/javascript">
 $(function() {
    $('#ClickMe').click(function(e) {
       e.preventDefault();
       $('#ReplaceMe').load($(this).attr('href'));
    });
 });
</script>

Update: To clarify, you are looking for a link to an action that returns a URL, and then load the contents of that URL.

public ActionResult TestItemLogistics()
{
    ControlViewModel model = new ControlViewModel();
    model.selectedItem = "Logistics";

    UrlHelper u = new UrlHelper(ControllerContext.RequestContext);
    return Content(u.Action("MenuList", model));

}


<script type="text/javascript">
 $(function() {
    $('#ClickMe').click(function(e) {
       e.preventDefault();
       $.get($(this).attr('href'), function(url) {
              $('#ReplaceMe').load(url);
       });
    });
 });
</script>

Answer 4

Utilize .load to update the content within the chosen element(s) with the HTML response fetched from a specified URL.

For instance:

<a href="@url.Action(subItem.action, subItem.controller)" id="ClickMe">Click Here</a>
<div id="ReplaceMe"></div>

This can be achieved as follows:

<script type="text/javascript">
 $(function() {
    $('#ClickMe').click(function(e) {
       e.preventDefault();
       $('#ReplaceMe').load($(this).attr('href'));
    });
 });
</script>

Update: To clarify, you are looking for a link to an action that returns a URL, and then load the contents of that URL.

public ActionResult TestItemLogistics()
{
    ControlViewModel model = new ControlViewModel();
    model.selectedItem = "Logistics";

    UrlHelper u = new UrlHelper(ControllerContext.RequestContext);
    return Content(u.Action("MenuList", model));

}


<script type="text/javascript">
 $(function() {
    $('#ClickMe').click(function(e) {
       e.preventDefault();
       $.get($(this).attr('href'), function(url) {
              $('#ReplaceMe').load(url);
       });
    });
 });
</script>

Answer 5

Answer №3

Utilize the Ajax attribute in your view to easily update specific elements by their ID.

@Ajax.RouteLink("TestLink", new { controller = "Person", action = "Partial" },new AjaxOptions() { InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace, UpdateTargetId = "ElementID" })

Give this a try!

Answer 6

Utilize the Ajax attribute in your view to easily update specific elements by their ID.

@Ajax.RouteLink("TestLink", new { controller = "Person", action = "Partial" },new AjaxOptions() { InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace, UpdateTargetId = "ElementID" })

Give this a try!

Refresh a div on an ASP MVC page with a controller action without the need to reload the entire page

Answer №1

Answer №2

Answer №3

Similar questions

Text that fades in and out based on scrolling past a specific point

A simple way to position a button separate from a form

Shifting the div with a sliding animation!

When interacting with Chrome, the div gets automatically blurred upon being clicked

Show a loading icon as the synchronous Ajax request is being sent

Display all pages in the DataTables plugin while utilizing responsive tables and additional features

PHP-MySQL FlipClock: Counting Down in Reverse

"Enhancing Shopify experience by seamlessly adding products without the need for page refresh

What is the best way to showcase AJAX data within a complex HTML structure?

Various forms utilizing the same submission function

Implementing MySQL in JavaScript code leads to various possibilities

Tips for organizing an AngularJS bootstrap Modal for a search feature

I want to use the enter key for posting, but also have the ability to use the shift and enter key to create a

Merging onsubmit attribute with jQuery submit event listener

The issue of Jquery not functioning properly within Ajax-included HTML documents

Having trouble with Ajax POST and CodeIgniter integration?

The JavaScript .load() function fails to run

While working with ajax form submission in CodeIgniter, I encountered an issue where I did not receive the expected value in the

The form submission feature is malfunctioning due to JavaScript issues

Alter the background color of a div contingent on the checkbox being checked within