Steps to extract viewmodel information from a specific controller following an ajax request

Question

Steps to extract viewmodel information from a specific controller following an ajax request

I am encountering an issue with passing updated data from my controller to the view after making an Ajax call. Here is a simplified version of what I am trying to achieve:

Javascript

$ANALYZE = $('#submitID');

$ANALYZE.click(function () {
    var objectID = document.getElementById('objectIDInput').value;

    $.ajax({
        url: '@Url.Action("AnalyzeData")',
        type: "POST",
        dataType: "json",
        data: { 'objectID': objectID },
        success: function (response) {
            alert(response.responseText);
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
});

Controller

public ActionResult Index(AnalyzeViewModel data)
{
    //Logic to update view model
}

[HttpPost]
public ActionResult AnalyzeData (int objectID)
{
    //Logic to analyze data and update view model, then return JSON response
}

View

<tbody class="scrollContent">
    @if (Model.fileData != null)
    {
        //Display data in table
    }
</tbody>

javascript c#ajax asp.net-mvc

Answer 1

Answer №1

Here is a sample code snippet that shows how to retrieve data in the success function of jQuery:

Jquery

$ANALYZE = $('#submitID');

    $ANALYZE.click(function () {
        var objectID = document.getElementById('objectIDInput').value;

        $.ajax({
            url: '@Url.Action("AnalyzeData")',
            type: "POST",
            dataType: "json",
            data: { 'objectID': objectID },
            success: function (data) {
               // Inside this block, 'data' represents the viewmodel
              // Add your logic here
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    });

Controller Method Code:

[HttpPost]
public ActionResult AnalyzeData (int objectID)
{
    List<string> retList = new List<string>();
    AnalyzeViewModel avm = new AnalyzeViewModel();

    try {
        retList = SOME LIST

        avm.fileData = retList.ToArray();

        Response.StatusCode = (int)HttpStatusCode.OK;
        var obj = new
        {
            success = true,
            responseText = "Zones data has been calculated."
        };


        return Json(avm, JsonRequestBehavior.AllowGet);
    }

I hope you find this information useful.

Thank you,

Karthik

Answer 2

Here is a sample code snippet that shows how to retrieve data in the success function of jQuery:

Jquery

$ANALYZE = $('#submitID');

    $ANALYZE.click(function () {
        var objectID = document.getElementById('objectIDInput').value;

        $.ajax({
            url: '@Url.Action("AnalyzeData")',
            type: "POST",
            dataType: "json",
            data: { 'objectID': objectID },
            success: function (data) {
               // Inside this block, 'data' represents the viewmodel
              // Add your logic here
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    });

Controller Method Code:

[HttpPost]
public ActionResult AnalyzeData (int objectID)
{
    List<string> retList = new List<string>();
    AnalyzeViewModel avm = new AnalyzeViewModel();

    try {
        retList = SOME LIST

        avm.fileData = retList.ToArray();

        Response.StatusCode = (int)HttpStatusCode.OK;
        var obj = new
        {
            success = true,
            responseText = "Zones data has been calculated."
        };


        return Json(avm, JsonRequestBehavior.AllowGet);
    }

I hope you find this information useful.

Thank you,

Karthik

Steps to extract viewmodel information from a specific controller following an ajax request

Answer №1

Similar questions

Format numeric values to millions and thousands by rounding them off

Tips on configuring an HTTP client to manage the response for an HTTP DELETE request and its body

Utilizing streams for file input and output operations in programming

What could be causing my fetch() function to send a JSON body that is empty?

no output upon completion of a class constructor - JavaScript

Counting up in Angular from a starting number of seconds on a timer

Ways to conceal all components except for specific ones within a container using JQuery

Track the number of clicks on the pop-up registered in the PHPMyAdmin database

What are the steps to integrating an HTML source with jQuery Autocomplete?

Tips for organizing your JSON Structure within ReactJs

What is the best way to handle multiple responses in Ajax within a single function?

Protractor: Decrease the magnification

Issue with Bootstrap 5 Carousel not transitioning between slides

Utilizing CSS and jQuery to align images in the center of the screen

Output JSON data from PHP for use in Javascript

NodeJS loop issue with variable scoping in the context of express and mongoose

Viewing the photo container before uploading while having text overlap

Implementing Datatrans Ajax in Wordpress is a seamless process that enhances

Refresh the angular form after submitting data

What is the best way to retrieve the promise that encountered an error in the catch block while using async/await