CODEWITHSUNDEEP
c#javascriptjqueryasp.net-mvc-3asp.net-mvc-routing
pisi
pisi

Reputation: 127

return another MVC3 view of the same controller after ajax is used

How to return another view of the same controller? I made some debugging for the application: the ajax method calls the controller action, pass the parameter, executes the instructions. At the 

return View("GetEmployeeDays", model);,

the "GetEmployeeDays" view receives the values from model and is populated, but finally in the browser I receive the initial view (from I made the request) - not the GetEmployeeDays view

routing code from Global.asax:

public static void RegisterRoutes(RouteCollection routes)
 {
  routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  routes.MapRoute(
      "Default", // Route name
      "{controller}/{action}/{id}", // URL with parameters
       new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
    );          
  }

JQuery code that calls the action controller's and pass a parameter:

<script type="text/javascript">
  $(document).ready(function () {
  $('li').click(function () {
  $.ajax({
    url: '@Url.Action("GetEmployeeDays", "ApproveWork")',
    type: 'GET',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    data: { userCode: $(this).attr('id') }
   })
  });
});

Controller action that should render the GetEmployeeDays view:

   [HttpGet]
   public ActionResult GetEmployeeDays(string userCode)
   {
      .....
    return View("GetEmployeeDays", model);
   }

Upvotes: 0

Views: 3514

Answers (4)

David Diez
David Diez

Reputation: 1223

You can't redirect via ajax request. Try a simple GET request:

<script type="text/javascript">
$('li').on('click', function()
{
   document.location.href = '@Url.Action("GetEmployeeDays", "ApproveWork")' + '?param1=val1&param2=val2';
});
</script>

The controller is fine as it is now.

EDITED: Updated as requested

Upvotes: 1

Shyju
Shyju

Reputation: 218702

If you want to simply load something to a part of your page without reloading to a new page, you should update the specific part of your page in the callback of your ajax function.

$(function(){
 $('li').click(function () {
     var uCode=$(this).attr("id");
     $.get("@Url.Action("GetEmployeeDays","ApproveWork")?userCode="+uCode,
                                                          function(response){
       $("#DivToBeUpdated").html(response);
     });
 });
});

If you want to redirect to a new view, you should do it by updating the location.href property value.

$(function(){
 $('li').click(function () {
     var uCode=$(this).attr("id");
     var url="@Url.Action("GetEmployeeDays","ApproveWork")?userCode="+uCode;
     window.location.href=url;         
     });
 });
});

Upvotes: 1

MisterJames
MisterJames

Reputation: 3326

?Building from @David Diez, you can append parameters to your request as follows:

<script type="text/javascript">
$('li').on('click', function()
{
   document.location.href = '@Url.Action("GetEmployeeDays", "ApproveWork", new { caseSensativeParamName = "foo" })';
});
</script>

You can, of course, go a JavaScript route as well. Something like this should work:

<script type="text/javascript">
$('li').on('click', function()
{
   var targetUrl = '@Url.Action("GetEmployeeDays", "ApproveWork")';
   var yourParam = $("#input-id").val();
   targetUrl = targetUrl + '?yourServerParamName=' + yourParam;
   document.location.href = targetUrl;
});
</script>

Cheers.

Upvotes: 0

David L
David L

Reputation: 33815

Without knowing what your original view is that is being re-rendered, I'd say that most likely your issue is that you should be returning this as a PartialView, since you are making an Ajax request. In addition, it doesn't look like you are actually rendering the result anywhere. What is your fiddler response? Does it show returned HTML? If it does, you probably just need to dump it onto the page by utilizing the .done callback within $.ajax.

<script type="text/javascript">
$(document).ready(function () {
$('li').click(function () {
$.ajax({
    url: '@Url.Action("GetEmployeeDays", "ApproveWork")',
    type: 'GET',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    data: { userCode: $(this).attr('id') }
    }).done(function() {
       $(this).addClass("done");
  });
});
</script>

Upvotes: 1

Related Questions