Fakhar uz Zaman
Fakhar uz Zaman

Reputation: 299

Call controller which returns view in javascript

I am working in ASP.Net MVC. I have following Javascript code in which i am calling a controller-method which returns a view. I want to send parameters to a controller method which re

function fun(p1,p2)
        {
          // code here to call controller method which returns view   
        }



public ActionResult ProblemDetails(p1,p2)
        {
           // here goes some code.
             return View();
}

Please tell me the code which can be used to call controller and send parameters too.

Upvotes: 0

Views: 3315

Answers (5)

Jalpesh Vadgama
Jalpesh Vadgama

Reputation: 14216

Use JSONResult instead of ActionResult and Manipulate return data in javascript.

Upvotes: 0

wwcdwdcw
wwcdwdcw

Reputation: 186

Action Method

public ActionResult SendStream(string a, string b)
{

}

JQuery/JSON

Please note that Get Verb will not support complex Data parameters due to it's Query string length constraint. So use POST Verb instead of GET Verb while sending large data

$.ajax({
    url: url,
    data: JSON.stringify({ a: "a", b: "b" }), //Two String Parameters
    type: 'GET',                              //For Submit, use POST
    contentType: 'application/json, charset=utf-8',
    dataType: 'json'
}).done(function (data) {
    //Success Callback
}).fail(function (data) {
    //Failed Callback        
}).always(function(data) { 
    //Request completed Callback
});

Upvotes: 2

InspiredBy
InspiredBy

Reputation: 4320

There are several ways to do it. For example Ajax:

Quick note first: Make sure that in your MVC routing configuration you have a route configured to reflect the following url below:

function fun(p1,p2)
{
     var url = '/ControllerName/ProblemDetails?p1=p1&p2=p2' //url to your action method

    $.ajax({
       url:url,
       type:'post' or 'get', //(depending on how you're doing this. If post you can pass data internally instead of query string ),
       dataType:'html', //(for example)
       success:function(data){
            //data here will contain your View info so you can append it do div for example. You can use JQuery .html() function for that
       error: function (xhr) {
        //catch error
         } 
        }
    })
}

Another way, in case if you want to load your View data to DIV is to use JQUery functions such as .load();

function fun(p1,p2)
{
     var url = '/ControllerName/ProblemDetails?p1=p1&p2=p2';

     $('#YourDivTagForExample').load(url);
 }

$.ajax call can also be abbriviated to $.get, $.post or $.getJSON depending on what kind of a call you want to make to your action method. There is a lot more to it too.

Finally make sure to take a look at this answer. Your question was actually already answered in full: Correct way to handle Ajax calls in ASP.Net MVC 3

Upvotes: 0

technicallyjosh
technicallyjosh

Reputation: 3531

jQuery.get is the shorthand way to achieve this.

function fun(p1,p2)
{
    var url = '/controller/ProblemDetails?p1=' + p1 + '&p2=' + p2;
    $.get(url, function (data) {
      // data will be your response as html
    });
}

I might also suggest to have the action return PartialView() instead of View() since you will not return the layout along with the response. It all depends on your intentions for the returned html.

Upvotes: 0

Rob
Rob

Reputation: 5588

Are you perhaps looking to return a Partial View? You can use jQuery ajax to post to a controller method that returns a Partial View (html). You can then render that HTML on the page.

http://mazharkaunain.blogspot.com/2011/04/aspnet-mvc-render-partial-view-using.html

Upvotes: 0

Related Questions