How Do I Load A View And Then A Partial View Within It In A Mvc Project Using Javascript?

Whatever I do, I keep getting the reverse order. I just want to refresh the entire page after ajax finishes a certain action and then simply load a certain partial view, this is my

Solution 1:

Load the partial view in document.ready function

and put the location.reload() in success block

       $(document).ready(function()
       {
           var urlShowSensors = "@Url.Action("ShowSensorNames", "PredefinedViews",
                        new {                 predefinedViewID = "PredefID" })";
                    urlShowSensors = urlShowSensors.replace("PredefID",  
                                                PredefineViewID);
                    $(divSensorNames).load(urlShowSensors);
       });


       $(".sensor-delete-table").on("click", function () {
       $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '@Url.Action("DeleteSensor", "PredefinedViews")',
                data: JSON.stringify({ pviID: PredefineViewsItemID, pID: PredefineViewID
                    }   ),
                dataType: "json",
                success: function (result) {
                             location.reload(true);}});
       });

Solution 2:

it is doing exactly what you have coded.

complete and success callbacks that you have overridden gets called on your call to @Url.Action("DeleteSensor", "PredefinedViews"). so you are left out with a view as if the user has gone to the page for the first time. There's no point of loading the partial view in the success callback as the whole page got reloaded in the complete callback.

As far as I can understand by looking at your code, you should call whatever in the success callback within the document ready.

$(function(){
    var urlShowSensors = "@Url.Action("ShowSensorNames", "PredefinedViews", new { predefinedViewID = "PredefID" })";
    urlShowSensors = urlShowSensors.replace("PredefID", PredefineViewID);
    $(divSensorNames).load(urlShowSensors);
});

Not sure what conditions you have to check. but it doesn't seem that you are using the response from the ajax call within the success callback. so the above should work.

UPDATE To answer your update

As you are already using partial views and as it seem you understand the concept of it, why don't you move the table to a partial view as well and call it just like you are trying to load ShowSensorNames partial and comment out the location.reload(true); code.

First create a partial view (e.g call it MyTable.cshtml) and move your table html to it and strongly type it with the Model.

now in your View where the Table used to be. Do the following

<div id="myTableContainer">
    @Html.Partial("MyTable", Model)
</div>

Now create a action in your controller called MyTable which returns a partial view

public ActionResult MyTable()
{    
    var myTableDataModel = //retrieve table datareturn PartialView(myTableDataModel);
}

Now lets get to the javascript code

<scripttype="text/javascript">
$(function () {
    $(".sensor-delete-table").on("click", function () {
        var divSensorNames = $("#sensorNames");
        var tr = $(this).parents('tr:first');
        varPredefineViewsItemID = tr.find("#PredefineViewsItemID").html();
        varPredefineViewID = tr.find("#PredefineViewID").html();
        var amount = parseInt($("[data-id='" + PredefineViewID + "']").text());
        var flag = confirm('@Html.Localize("deleteCheck")');
        var urlShowNewSensors = "@Url.Action("ShowSensorNames", "PredefinedViews", new { predefinedViewID = "PredefineViewID" })";
        urlShowNewSensors = urlShowNewSensors.replace("PredefineViewID", PredefineViewID);
        if (PredefineViewID != "" && flag) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '@Url.Action("DeleteSensor", "PredefinedViews")',
                data: JSON.stringify({ pviID: PredefineViewsItemID, pID: PredefineViewID }),
                dataType: "json",
                success: function (result) {
                    ///location.reload(true);
                },
                complete: function (result) {

                    var urlShowSensors = '@Url.Action("ShowSensorNames", "PredefinedViews", new { predefinedViewID = "PredefID" })';
                    var urlMyTable = '@Url.Action("MyTable", "PredefinedViews")';
                    urlShowSensors = urlShowSensors.replace("PredefID", PredefineViewID);
                    $(divSensorNames).load(urlShowSensors);
                    $("#myTableContainer").load(urlMyTable);
                },

            });
        }
    });
});
</script>