How to return MVC view to JQuery post success delegate

Question

I have the following JQuery method for posting data to a action in my MVC contorller:

$('#btnAddNewTest').on("click", function () {
    var date = $('#HIVTestTestDate').val();
    var result = $('#HIVTestTestResult').val();
    var cd4 = $('#HIVTestCD4Count').val();
    var pID = $('#PatientID').val();

    var dataToSend = { patientID: pID, testDate: date, resultID: result, cd4Count: cd4 };

    $.post("/HIVInformation/AddHIVTest/", dataToSend, function (receivedData) {
        location.reload(false); //Don't want to do this
    });

    return false;
});

Here is the Action method in my controller:

[HttpPost]
    public ActionResult AddHIVTest(Guid patientID, DateTime testDate, Guid resultID, int cd4Count)
    {
        MvcPatientDetailsHIVViewModel model = new MvcPatientDetailsHIVViewModel(patientID);
        model.LoadAllData();

        try
        {
            //add the HIV Test
            model.HIVTestResult = new Common.Models.PatientHIVTestModel()
            {
                ID = Guid.NewGuid(),
                PatientID = patientID,
                TestDate = testDate,
                HIVTestResultID = resultID,
                CD4Count = cd4Count
            };

            //call the add method
            model.AddHIVTestResults();
        }
        catch (Exception ex)
        {
            ModelState.AddModelError("", ex);
        }

        return View("Details", model);
    }

If I comment out the 'location.reload(false);' my page does not get refreshed. How do I serialize my Mvc view to be returned in the function (receivedData) delegate of the post? How do I display my view then from within the JQuery code?

Is it entire view? or just the partial view? If it is just the partial view, then you can get the `div` or any other container where you want to display the updated content and use `$('#divID').html(receivedData)` in your `success` call. — ramiramilu, Jan 12 '16 at 09:56
Make your return statement `return PartialView("Details", model)` and then in then replace `location.reload(false);` with `$(someElement).html(receivedData);` — , Jan 12 '16 at 09:57
Make `partial view` that returns `html` after calling `$.post` and you can do `$(your-div-id).html(data)`; — Parth Trivedi, Jan 12 '16 at 09:58
If your action return `View`, do usual `post` or `get` request, not ajax — Gene R, Jan 12 '16 at 10:00
I think, you are looking something like this, http://stackoverflow.com/questions/483091/render-a-view-as-a-string — Hiren Visavadiya, Jan 12 '16 at 10:07
Why do you want to load the entire page using jquery? Cant you load just the area on page which supposed to updated? — ramiramilu, Jan 12 '16 at 10:08

score 2 · Accepted Answer · answered Jan 12 '16 at 10:05

if i may, i would suggest to you to use ajax, partial views, and a container div for example to load the result in it.

Example:

Script:

$(document).ready(function () {
        $("#btnAddNewTest").on("click", function () {

            $.ajax({
                url: '@Url.Action("YourAction", "YourController")',
                type: 'post',
                data: {
                    yourData1: value1,
                    yourData2: value2,
                },
                success: function (result) {
                    $('#dynamicContent').html(result);
                }
            });
        });
    });

Controller:

 public ActionResult YourAction(int yourData1= 1, int yourData2 = 0)
        {
            return PartialView("~/yourviewPath/_YourPartialView.cshtml", yourResultModel)
        }

Html:

<div id="dynamicContent" class="Float_Clear">
    @Html.Partial("~/yourviewPath/_YourPartialView.cshtml", Model)
</div>

Live example that I created using the same concept here

The View on my side was badly designed, multiple sections of "sub posts" that should happen, but could not happen in a easy way, because no partial views existed and html form tags should not be nested. I am excepting your answer as the solution as I will break the form up in multiple partial views now and this approach should then work. Thanks — , Jan 12 '16 at 10:14
Where was the live example? the link your pointing is something else. — ramiramilu, Jan 12 '16 at 10:26

How to return MVC view to JQuery post success delegate

1 Answers1