Transferring the outcome of JavaScript to a View

Question

Transferring the outcome of JavaScript to a View

Hey there, I have a question as I am quite new to working with Asp.net. I have a Javascript code where I want to pass data to my Controller.

<script type="text/javascript">
        $("#SearchButton").on("click", function () {
            var $sucheMoped = [];
            $("#tab_logic tbody tr")
                .each(function () {
                    var $Item = $(this);
                    var suchfeld = $Item.find("td > input[name='Suchfeld']").val();
                    var schluessel = $Item.find("td > select[name='Suchschluessel'] > option:selected").val();
                    alert(suchfeld + "&&&" + schluessel);
                    $sucheMoped.push({
                        Suchfeld: suchfeld,
                        Suchschluesseltyp: schluessel
                    });
                });
            window.open('@Url.Action("MainView","MainView")?SuchObject='+$sucheMoped);
        })
    </script>

I am simply trying to send the "sucheMoped" from my JavaScript code to my Controller. My Controller is expecting an IEnumerable of Objects with properties Suchfeld and Suchschluesseltyp.

Does anyone have any ideas on how to approach this?

Thanks everyone.

javascript c#asp.net asp.net-mvc razor

Answer 1

Answer №1

To start off, the way you call the controller action needs to be adjusted. You should convert the array into a string using the JSON.stringify() method.

Here is how it should be done:

window.open('@Url.Action("MainView","MainView")?SuchObject='+JSON.stringify($sucheMoped));

Next, you will need to create a custom model binder to bind your array with the action parameter. The example below demonstrates a basic array model binder which may need to be customized further according to your requirements and error handling needs.

public class ArrayModelBinder: DefaultModelBinder
{
    public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        var rawArray = controllerContext.HttpContext.Request.QueryString["SuchObject"];
        var array = JsonConvert.DeserializeObject<IEnumerable<MyObject>>(rawArray);

        return array;
    }
}

In this code snippet, I retrieve the query string from the URL, then use JsonConvert.Deserialize<T> method to parse and return it.

Simply adorn the parameter in your controller's action with the custom model binder like shown below:

[HttpGet]
public ActionResult Search([ModelBinder(typeof(ArrayModelBinder))]IEnumerable<MyObject> SuchObject)
{
    return View(SuchObject);
}

Edit

If you want to open a new browser window or tab, you can make use of window.open. However, to navigate to another location without opening a new tab or window, utilize the window.location property as follows:

window.location = '@Url.Action("Search", "Home")?SuchObject=' + JSON.stringify(array);

Answer 2

To start off, the way you call the controller action needs to be adjusted. You should convert the array into a string using the JSON.stringify() method.

Here is how it should be done:

window.open('@Url.Action("MainView","MainView")?SuchObject='+JSON.stringify($sucheMoped));

Next, you will need to create a custom model binder to bind your array with the action parameter. The example below demonstrates a basic array model binder which may need to be customized further according to your requirements and error handling needs.

public class ArrayModelBinder: DefaultModelBinder
{
    public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        var rawArray = controllerContext.HttpContext.Request.QueryString["SuchObject"];
        var array = JsonConvert.DeserializeObject<IEnumerable<MyObject>>(rawArray);

        return array;
    }
}

In this code snippet, I retrieve the query string from the URL, then use JsonConvert.Deserialize<T> method to parse and return it.

Simply adorn the parameter in your controller's action with the custom model binder like shown below:

[HttpGet]
public ActionResult Search([ModelBinder(typeof(ArrayModelBinder))]IEnumerable<MyObject> SuchObject)
{
    return View(SuchObject);
}

Edit

If you want to open a new browser window or tab, you can make use of window.open. However, to navigate to another location without opening a new tab or window, utilize the window.location property as follows:

window.location = '@Url.Action("Search", "Home")?SuchObject=' + JSON.stringify(array);

Answer 3

Answer №2

When utilizing the jQuery.ajax function, it becomes possible to send intricate objects through the data parameter.

$.ajax({
    url: '@Url.Action("MainView", "MainView")',
    type: 'GET',
    data: { 'SuchObject': $sucheMoped },
    success: function (htmlContent) {
        // Transfer content to a new window (adapted from http://stackoverflow.com/a/23379892/1450855)
        var w = window.open('about:blank', 'windowname');
        w.document.write(htmlContent);
        w.document.close();
    }
});

Answer 4

When utilizing the jQuery.ajax function, it becomes possible to send intricate objects through the data parameter.

$.ajax({
    url: '@Url.Action("MainView", "MainView")',
    type: 'GET',
    data: { 'SuchObject': $sucheMoped },
    success: function (htmlContent) {
        // Transfer content to a new window (adapted from http://stackoverflow.com/a/23379892/1450855)
        var w = window.open('about:blank', 'windowname');
        w.document.write(htmlContent);
        w.document.close();
    }
});

Answer 5

Answer №3

If you want to trigger an action method in your controller and return a JavaScriptResult type, you can utilize the jQuery library's $.getScript function.

$.getScript("HomeController", "Display")

// HomeController
private JavaScriptResult Display()
{
    string message = "alert('Hello World');";

    return new JavaScriptResult { Script = message };
}

Answer 6

If you want to trigger an action method in your controller and return a JavaScriptResult type, you can utilize the jQuery library's $.getScript function.

$.getScript("HomeController", "Display")

// HomeController
private JavaScriptResult Display()
{
    string message = "alert('Hello World');";

    return new JavaScriptResult { Script = message };
}

Transferring the outcome of JavaScript to a View

Answer №1

Answer №2

Answer №3

Similar questions

Mastering the correct usage of parsing and stringifying in JSON is

Incorporating Select2 into Your Laravel 4 Application

I'm having difficulty implementing a vue-awesome icon on my project

Passing a string array from View to Controller using Url.Action in MVC framework

What is the process for exporting an SVG file from a web page?

Having a minor problem in attempting to retrieve a random value

Encountered an issue while attempting to handle the image uploaded via React using Node.js and Sharp

What is the best way to include a   in a map function using JavaScript?

Achieving the resolution of a Promise amidst the failure of a separate promise

Using Three.js to transfer one object's rotation to another object

Guidelines for displaying a single record from a JSON object in an MVC view sequentially

Leveraging ES6 with jQuery in Symfony 4

Restful Spinner

Three.js tutorial: Rotating items on each axis individually

Changing the parent scope from the child component does not automatically reflect changes in an ng-repeat

ASP.NET AJAX MaskedEditExtender is a powerful tool that allows developers

Restricting Meteor Publish to specific user (admin) for all collections

Ways to convert a buffered document into an object

The search function in Select2 is not displaying the desired result

explore a nested named view using ui-router

Transferring the outcome of JavaScript to a View

Answer №1

Answer №2

Answer №3

Similar questions

Mastering the correct usage of parsing and stringifying in JSON is

Incorporating Select2 into Your Laravel 4 Application

I'm having difficulty implementing a vue-awesome icon on my project

Passing a string array from View to Controller using Url.Action in MVC framework

What is the process for exporting an SVG file from a web page?

Having a minor problem in attempting to retrieve a random value

Encountered an issue while attempting to handle the image uploaded via React using Node.js and Sharp

What is the best way to include a &nbsp; in a map function using JavaScript?

Achieving the resolution of a Promise amidst the failure of a separate promise

Using Three.js to transfer one object's rotation to another object

Guidelines for displaying a single record from a JSON object in an MVC view sequentially

Leveraging ES6 with jQuery in Symfony 4

Restful Spinner

Three.js tutorial: Rotating items on each axis individually

Changing the parent scope from the child component does not automatically reflect changes in an ng-repeat

ASP.NET AJAX MaskedEditExtender is a powerful tool that allows developers

Restricting Meteor Publish to specific user (admin) for all collections

Ways to convert a buffered document into an object

The search function in Select2 is not displaying the desired result

explore a nested named view using ui-router

What is the best way to include a in a map function using JavaScript?