Return view with jquery ajax

Question

I would like to return a view inside of Ajax Success in my Jquery.

This is my [HttpPost] MVC Action, decorated with HttpPost

public ActionResult Search(SearchOrder order) 
{
    if (Session["UserID"] != null)
    {
        var results = orderPresenter.GetSearchOrderSearchResult("CUSTOMER", null, currentSettings.CompanyId,
            currentSettings.CustomerId.ToString(), "-1", "1", "1752", "2993", "", -1,
            "", -1, "91387", "1", "1", "454545", "", "4", 1, "", "404", "78",
            "-1", DateTime.Parse("09/29/2015"), DateTime.Parse("10/01/2015"),
            null, null, currentSettings.UserSecurityLevel.ToString(),
            currentSettings.UserId.ToString(), "2", "");
        return View("SearchResults", results);
    }
    else
        return RedirectToAction("Login", "Account");

}

This is my view from which HTTPPost is being done

@{
ViewBag.Title = "SearchOrder";
Layout = "~/Views/Shared/_MasterLayout.cshtml";
}

            <div class="row" style="margin-top:40px;">
                <div class="col-md-7">
                    <label class="control-label col-md-3">Tracking #</label>
                    <div class="col-md-4">
                        <input name="Tracking" size=5 maxlength=5 onkeypress="return numbersonly(this, event)" style="width:50px;">
                        -<input name="Tracking" size=5 maxlength=5 onkeypress="return numbersonly(this, event)" style="width:50px;">
                        - <input name="Tracking" size=5 maxlength=5 onkeypress="return numbersonly(this, event)" style="width:50px;">
                    </div>
                    <br>
                    <br>
                    <label class="control-label col-md-3">Order PO:</label>
                    <div class="col-md-4">
                        <input type="text" style="width:100%;" />
                    </div>
                    <br>
                    <br>
                    <label class="control-label col-md-3">Reference:</label>
                    <div class="col-md-4">
                        <input type="text" style="width:100%;" />
                    </div>
                    <br>
                    <br>
                    <label class="control-label col-md-3">SKU:</label>
                    <div class="col-md-4">
                        <input type="text" style="width:100%;" />
                    </div>
                    <br>
                    <br>
                    <div class="form-group">
                        <label class="control-label col-md-3">Country:</label>
                        <div class="col-md-4">
                            <select class="form-control input-xlarge select2me select2-offscreen" data-placeholder="Select..." tabindex="-1" title="" id="form-controls">
                                <option value=""></option>
                                <option value="AL">Option</option>
                                <option value="WY">Option</option>
                            </select>
                        </div>
                    </div>

                    <br>
                    <br>
                    <div class="form-group">
                        <label class="control-label col-md-3">Delivery Address:</label>


                        <div class="col-md-4">
                            <select class="form-control input-xlarge select2me select2-offscreen" data-placeholder="Select..." tabindex="-1" title="" id="form-controls">
                                <option value=""></option>
                                <option value="AL">Option</option>
                                <option value="WY">Option</option>
                            </select>
                        </div>
                    </div>

                    <br>
                    <br>
                    <div class="form-group">
                        <label class="control-label col-md-3">Users:</label>


                        <div class="col-md-4">
                            <select class="form-control input-xlarge select2me select2-offscreen" data-placeholder="Select..." tabindex="-1" title="" id="form-controls">
                                <option value=""></option>
                                <option value="AL">Option</option>
                                <option value="WY">Option</option>
                            </select>
                        </div>
                    </div>


                    <br>
                    <br>
                    <div class="form-group">
                        <label class="control-label col-md-3">Supplier:</label>


                        <div class="col-md-4">
                            <select class="form-control input-xlarge select2me select2-offscreen" data-placeholder="Select..." tabindex="-1" title="" id="form-controls">
                                <option value=""></option>
                                <option value="AL">Option</option>
                                <option value="WY">Option</option>
                            </select>
                        </div>
                    </div>


                    <br>
                    <br>
                    <div class="form-group">
                        <label class="control-label col-md-3">Manufacturer:</label>


                        <div class="col-md-4">
                            <select class="form-control input-xlarge select2me select2-offscreen" data-placeholder="Select..." tabindex="-1" title="" id="form-controls">
                                <option value=""></option>
                                <option value="AL">Option</option>
                                <option value="WY">Option</option>
                            </select>
                        </div>
                    </div>



                    <br>
                    <br>
                    <div class="form-group">
                        <label class="control-label col-md-3">Category:</label>


                        <div class="col-md-4">
                            <select class="form-control input-xlarge select2me select2-offscreen" data-placeholder="Select..." tabindex="-1" title="" id="form-controls">
                                <option value=""></option>
                                <option value="AL">Option</option>
                                <option value="WY">Option</option>
                            </select>
                        </div>
                    </div>

                </div>
                <div class="col-md-4">



                    <div class="form-group">
                        <label class="col-md-3 control-label">Order Status:</label>
                        <div class="col-md-9">
                            <select class="form-control" multiple="">
                                <option>Option 1</option>
                                <option>Option 2</option>
                                <option>Option 3</option>
                                <option>Option 4</option>
                                <option>Option 5</option>
                            </select>
                        </div>
                    </div>


                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>

                    <div class="form-group">
                        <label class="col-md-3 control-label">Parts: </label>
                        <div class="col-md-9">
                            <select class="form-control" multiple="">
                                <option>Option 1</option>
                                <option>Option 2</option>
                                <option>Option 3</option>
                                <option>Option 4</option>
                                <option>Option 5</option>
                            </select>
                        </div>
                    </div>

                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>

                    <div class="form-group">
                        <label class="col-md-3 control-label">Bundles:</label>
                        <div class="col-md-9">
                            <select class="form-control" multiple="">
                                <option>Option 1</option>
                                <option>Option 2</option>
                                <option>Option 3</option>
                                <option>Option 4</option>
                                <option>Option 5</option>
                            </select>
                        </div>
                    </div>

                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>

                    <div class="form-group">
                        <label class="control-label col-md-3">Ordered After:</label>
                        <div class="col-md-3">
                            <div class="input-group input-medium date date-picker" data-date="12-02-2012" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
                                <input type="text" class="form-control" readonly>
                                <span class="input-group-btn">
                                    <button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
                                </span>
                            </div>
                        </div>
                    </div>

                    <br>
                    <br>
                    <br>

                    <div class="form-group">
                        <label class="control-label col-md-3">Ordered Before:</label>
                        <div class="col-md-3">
                            <div class="input-group input-medium date date-picker" data-date="12-02-2012" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
                                <input type="text" class="form-control" readonly>
                                <span class="input-group-btn">
                                    <button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
                                </span>
                            </div>
                        </div>
                    </div>

                    <br>
                    <br>
                    <br>

                    <div class="form-group">
                        <label class="control-label col-md-3">Shipped After:</label>
                        <div class="col-md-3">
                            <div class="input-group input-medium date date-picker" data-date="12-02-2012" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
                                <input type="text" class="form-control" readonly>
                                <span class="input-group-btn">
                                    <button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
                                </span>
                            </div>
                        </div>
                    </div>

                    <br>
                    <br>
                    <br>

                    <div class="form-group">
                        <label class="control-label col-md-3">Shipped Before: </label>
                        <div class="col-md-3">
                            <div class="input-group input-medium date date-picker" data-date="12-02-2012" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
                                <input type="text" class="form-control" readonly>
                                <span class="input-group-btn">
                                    <button class="btn default" type="button">
                                        <i class="fa fa-calendar"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>

                    <br>
                    <br>
                    <br>

                    <div class="clearfix"></div>

                    <div class="row">

                        <div class="col-md-3"></div>
                        <div class="col-md-9">
                            <button type="button" class="btn btn-default" style="float:right; margin-left:20PX; " id="per">Reset</button>
                            <a href="#">

                                <button id="btnSearchOrder" type="button" class="btn btn-default" style="float:right;  margin-left:20PX;" id="per" onclick="">Search</button>




                            </a>

                        </div>

                    </div>
                </div>

            </div>

$('#btnSearchOrder').click(function () {


    var searchParam={
        'STrackNo': '123',
        'OrderPO': '187'

    };


    $.ajax({
        url: '/Order/Search',
        type: 'POST',
        data: searchParam,
        success: function (data) {


        }


    })


})

This is View to return from Http POST action

@model List<OneSourceCore.ViewModel.SearchOrder>

@{
ViewBag.Title = "SearchOrder";
Layout = "~/Views/Shared/_MasterLayout.cshtml";
}



<div>


@using GridMvc.Html;

@if(Model!=null)
{ 

@Html.Grid(Model).Columns(columns =>
      {
          columns.Add(C => C.TrackingNo).Sortable(true).Filterable(true).Titled("Tracking No").SetWidth(30);
          columns.Add(C => C.OrderPO).Sortable(true).Filterable(true).Titled("Order PO").SetWidth(200);
          columns.Add(C => C.DestPORef).Sortable(true).Filterable(true).Titled("Dest P.O").SetWidth(30);
          columns.Add(C => C.OrderDate).Sortable(true).Filterable(true).Titled("Order Date").SetWidth(30);
          columns.Add(C => C.ETS).Sortable(true).Filterable(true).Titled("ETS").SetWidth(30);
          columns.Add(C => C.DeliveryAddress).Sortable(true).Filterable(true).Titled("Delivery Address").SetWidth(30);
          columns.Add(C => C.Status).Sortable(true).Filterable(true).Titled("Status").SetWidth(30);
          columns.Add(C => C.Total).Sortable(true).Filterable(true).Titled("Total").SetWidth(30);
          columns.Add(C => C.Currency).Sortable(true).Filterable(true).Titled("Currency").SetWidth(30);
      }).WithPaging(15)
}

`return RedirectToAction("Login", "Account");` is a but pointless if its an ajax call - ajax calls do not redirect. — , Oct 08 '15 at 07:46

hjardine · Answer 1 · 2015-10-08T07:15:51.063

I'm assuming that you would like to do a partial page update, if this is the case then you would need to have your partial page rendered on the main page somewhere first, then update it after the callback and show the changes.

If you would like to redirect then you could simply do an Ajax callback inside of the success function (if you cannot do it in the original controller for some reason).

UPDATE

After your comment i now understand what you want to do.

you are looking for RedirectToAction Which is what you are using in the else section:

Original Controller

public ActionResult Search(SearchOrder order) 
{
    if (Session["UserID"] != null)
    {
        var results = orderPresenter.GetSearchOrderSearchResult("CUSTOMER", null, currentSettings.CompanyId,
            currentSettings.CustomerId.ToString(), "-1", "1", "1752", "2993", "", -1,
            "", -1, "91387", "1", "1", "454545", "", "4", 1, "", "404", "78",
            "-1", DateTime.Parse("09/29/2015"), DateTime.Parse("10/01/2015"),
            null, null, currentSettings.UserSecurityLevel.ToString(),
            currentSettings.UserId.ToString(), "2", "");
        return View("SearchResults", results);
    }
    else
        return RedirectToAction("Login", "Account");

}

New Controller

public ActionResult Search(SearchOrder order) 
{
    if (Session["UserID"] != null)
    {
        var results = orderPresenter.GetSearchOrderSearchResult("CUSTOMER", null, currentSettings.CompanyId,
            currentSettings.CustomerId.ToString(), "-1", "1", "1752", "2993", "", -1,
            "", -1, "91387", "1", "1", "454545", "", "4", 1, "", "404", "78",
            "-1", DateTime.Parse("09/29/2015"), DateTime.Parse("10/01/2015"),
            null, null, currentSettings.UserSecurityLevel.ToString(),
            currentSettings.UserId.ToString(), "2", "");
        return RedirectToAction("SearchResults", results);
    }
    else
        return RedirectToAction("Login", "Account");

}

Unless I am mistaken, you want to redirect to a new page with the data compiled in the controller, if so then this should work.

just want to return full view from the httppost action, with data in model — Rizwan Ul Haque, Oct 08 '15 at 07:06
So you want to redirect to a new page with new data? @RizwanUlHaque — hjardine, Oct 08 '15 at 07:08
Your doing it the correct way then, what is the error at the moment? @RizwanUlHaque — hjardine, Oct 08 '15 at 07:10
view not returned remains on the same view Search.cshtml rather SearchResults.cshtml (which is a result view), there is no error — Rizwan Ul Haque, Oct 08 '15 at 07:11

Return view with jquery ajax

1 Answers1