I have a screen that has two partial views

1. A Partial view container a controller that lets the user select options to filter
2. A Partial view containing a list of data rows

I can successfully pass the selected options from to the controller via ajax which then returns a partial view to replace the html of partial view 2, but it loses all of the rows as it has no context of the original view model data.

I have tried putting the view model into a hidden field on the index view and passing the relevant child object as json via ajax, but it blows out the JSON max length. "The length of the string exceeds the value set on the maxJsonLength property."

ViewModel

[JsonIgnore]
public string MyListJson
{
    get { return JsonConvert.SerializeObject(MyList); }
}

Index.vbhtml

@Code Html.RenderPartial("_Selection", Model) End Code
<div id="TargetDiv">
@Code Html.RenderPartial("_DataList", Model.MyList) End Code
</div>

@Html.Hidden("hdnViewModelJson", Model.MyList))

javascript.js

$.ajax({
    type: "POST",
    url: 'Main/UpdateRows',
     contentType: 'application/json',
    data: { testList : $('#hdnViewModelJson').val() },
    success: function (data) {
        alert("success")
        $("#TargetDiv").html(data)
    }
});

MainController

Public Function UpdateRows(testList as MyListType)
//Maniupulate rows based on parameters
Return PartialView("_ListSchemeBoardType",testList )
End Function

Is there a better way to update part of Partial View 2s view model without having to reprovide it?

How do I get the data from the view model into the controller if not?

CodePudding user response：

The best way to refilter a table in jQuery is described here.