call server-side function from client-side in mvc3

Question

I have followed this post, but the only thing that works from my solution is the error message alert. :D

My js-ajax code:

$(document).ready(function () {
    $('a').click(function (e) {
        var data = { 'id': $(this).attr("id") };
        var dataVal = JSON.stringify(data);

        $.ajax({
            type: "POST",
            url: "@Url.Action("ActionName", "ControllerName")", 
            contentType: "application/json; charset=utf-8",
            data: dataVal,
            dataType: "json",
            success: function (id) {
                alert(data.d);
                alert("yay! it works!");
            },
            error: function(id){
                alert("haha, it doesn't work! Noob!");
            }
        });
        return false;
    });
});

It is located at the end of the body, so it loads after all the other html contents are rendered.

This is my call-back function in the controller:

[HttpPost]
public ActionResult Hello(string id)
{
    return RedirectToAction(id);
}

and the HTML anchor tag:

<a href="#" style="float:left; font-size:13px;" id="pageName">Read more</a>

So, what I want is, upon any click of an anchor tag link, this JS to be fired and calling the function from the server-side, passing to it the value of the id parameter, where the call-back function will do its job (which is to call some View, according to the given id).

Buuuuut, I am getting only "haha, it doesn't work! Noob!" alert message. :D Any suggestions ?

Update with some code RedirectToAction is a method from the framework, that redirects to another action. In this case I redirect to an action that will call me a certain view, for example this one:

public ActionResult Media()
    {
        //do some stuff here 

        return View();
    }

This `$(document).ready(function () {});` itself is your guarantee that it will be executed just when the DOM is ready. You could place it anywhere you wanted, not just at the end of the page. — emerson.marini, Sep 10 '13 at 13:25
you should return `JsonResult`. What is `RedirectToAction(id)`? Show us code where you are redirecting. — Satpal, Sep 10 '13 at 13:25
This is not your problem, but it's wrong anyway: `success: function (id)`. It should be `success: function (data)`, as you're relying on it internally: `alert(data.d);`. — emerson.marini, Sep 10 '13 at 13:27

score 1 · Answer 1 · edited May 23 '17 at 12:28

You have to modify you method

public ActionResult Media()
{
    //do some stuff here 

    return View();
}

to something like

public JsonResult Media()
{
    //do some stuff here 
    return Json(new
                {
                    myData = RenderPartialViewToString("ViewName", optionalModel),
                    errorMessage = error
                });
}

Add following method with reference to ASP.NET MVC Razor: How to render a Razor Partial View's HTML inside the controller action

protected string RenderPartialViewToString(string viewName, object model)
{
    if (string.IsNullOrEmpty(viewName))
        viewName = ControllerContext.RouteData.GetRequiredString("action");

    ViewData.Model = model;

    using (StringWriter sw = new StringWriter()) {
        ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
        ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
        viewResult.View.Render(viewContext, sw);

        return sw.GetStringBuilder().ToString();
    }
}

@MelanciaUK, cheers as `ActionResult` can handle `Json` thus left it. also updated answer — Satpal, Sep 10 '13 at 13:46

call server-side function from client-side in mvc3

1 Answers1