CODEWITHSUNDEEP
c#jqueryhtmlajaxasp.net-mvc
MrNutbutters
MrNutbutters

Reputation: 17

Render a PartialView in a div without postback

I know this question has been asked many times but no matter what i try i just can't get it to work. I have an actionResult that accepts three parameters and returns a partial view. Now what i want to do is take the values of three elements and re-render the view in a div using them. I have tried to use the captured data to render the div succesfully but i can't figure out what i'm doing wrong with jquery

In the script file are included the last things i tried(although in every attempt there was some tweaking before giving up)

Here is the RenderAction in the main view (that works)

<div id="tables">
    @{ Html.RenderAction("_Tables", new { date = "5/10/2019", time = "13:00", seats = "1" });}
</div>

the action result that returns said Partial

public ActionResult _Tables(string date, string time, int seats)
        {
            return PartialView("_Tables", checkTables(date,time,seats));
        }

And finally the script(searchTable is a button near the fields. Their values are captured succesfully but load does not work)

$('#searchTable').click(function () {
    var date = document.getElementById("datepicker").value;
    var time = document.getElementById("time").value;
    var seats = document.getElementById("seats").value;
    alert(date);
    //var data = JSON.stringify({
    //    'date': date,
    //    'time': time,
    //    'seats': seats
    //});
    //$.ajax({
    //    type: "POST",
    //    url: '/Home/_Table/',
    //    data: data,
    //    dataType: "html",
    //    success: function (result) { success(result); }

    //});
    //function success(result) {
    //    alert(result);
    //    $("#tables").html(result);
    //    $("#tables").load("#tables")
    //};
    //$.ajax({
    //    url: "/Home/_Table",
    //    type: "GET",
    //    contentType: "application/json; charset=utf-8",
    //    data: data,
    //    success: function (data) {
    //        $('#target').html(data); // loading partialView into div
    //    }
    //});
    //$('#tables').load('@{ Html.RenderAction("_Tables", new { date = "' + date + '", time = "' + time + '", seats = "' + seats + '" });}');
    $('#tables').load('@Url.Action("_Tables","Home")', { 'date': date, 'time': time, 'seats': seats });
    alert(time);
    //alert('@{ Html.RenderAction("_Tables", new { date = "' + date + '", time = "' + time + '", seats = "' + seats + '" });}');
});

I know the problem lies in my lack of understanding but i do not have the time to research ajax. My internship is based on "figuring it out" under deadlines"

Upvotes: 0

Views: 742

Answers (2)

Nijin P J
Nijin P J

Reputation: 1322

Suppose you have a div with id tables as

<div id="tables">

You can use the following method of appending the partial view content based on your paramters as

        $.ajax({
        url: "/Home/_Tables?date=" + val + "&time="+ val +"&seats="+seats,
        type: "POST",
        cache: false,
        success: function (result) {
            $("#tables").empty();
            $("#tables").html(result);
        },
        error: function () {
            $("#tables").empty();
        }
    });

this will be the main view ajax function.and in the controller do the following

public ActionResult _Tables(string date, string time,string seats)
{
 // here you can provide model,any viewbag values etc to the partial view and  you will get corresponding html result
   return PartialView("Yourpartial ViewName");
}

Upvotes: 1

Ilia Afzali
Ilia Afzali

Reputation: 429

I see a commented line in your code :

 $("#tables").html(result);

It's all you need! You should fill your div with all partial view html that returns from your controller.

Upvotes: 0

Related Questions