PDA

View Full Version : [CLOSED] how to open partial view with model as parameter from javascript or jquery



alscg
Nov 29, 2013, 12:52 PM
Hi,

I am using ext.net partial view which is form panel with tree panel and another panel having child partial view.



@(Html.X().FormPanel()
.ID("frm")
.TopBar(Html.X().Toolbar().ID("TopBar").BorderSpec("0 1 1 1")
.Items(
Html.X().Button().ID("imgExportToExcel").Cls("btn export").ToolTip("Export to Excel").Text("Export To Excel"),
Html.X().Button().ID("imgPrint").Cls("btn print").ToolTip("Print").Text("Print")
)
)
.Items(
Html.X().Panel().ID("pnlTree").Layout(LayoutType.HBox).Items(
Html.X().Container().Flex(1).Items(Html.X().TreePa nel().Cls("tree-panel").BorderSpec("0 1 0 1")
.Height(350)
.Flex(1)
.Store(
Html.X().TreeStore()
.Proxy(
Html.X().AjaxProxy().Url(Url.Action("GetChildren"))
)
)
.Root(
Html.X().Node().NodeID("0").Text("All Notes")
)
.Listeners(l =>
l.ItemClick.Handler = "ShowNoteHistory(record.data.id,record.data.text);"
)),
Html.X().Panel().ID("pnlTpl").Layout(LayoutType.HBox)
.ItemsFromPartial("ViewNotes", Model)
)
)
)



7300

Please refer image,
Left side in the image is tree panel and right side is child partial view which contains tpl (XTemplate).
On click of tree node item, need to populate right side tpl (child partial view) againwith different data.
How to do that using javascript or jquery?
To call that partial view from tree node item click , giving $.Ajax call to controller action and fetching list<model> for tpl.But unable to assign or baing that model to child partial view again.
here is 'Shownotehistory' javascript function -


var ShowNoteHistory = function (id, text) {
$("#TplNoteHistory").empty();
$.ajax({
url: '@(Url.Action("ShowNoteHistoryByNode","Note"))',
data: { nodeID: id, NodeText: text },
datatype: "json",
type: "GET",
success: function (data) {
//data contains List<model> for tpl (right side partial view)
}
});
};


Controller code :-


public ActionResult ShowNoteHistoryByNode(string nodeID, string NodeText)
{
string[] noteDetail = nodeID.Split('_');
string nodeLevel = noteDetail[0];
string levelDataID = noteDetail[1];
List<NoteDTO> notes = new List<NoteDTO>();
int functionalityID = 0;
switch (Convert.ToInt32(nodeLevel))
{
case 1:
functionalityID = 1;
break;
case 2:
functionalityID = 9;
break;
default:
break;
}
notes = coreServiceProxy.ReadAllNote().TheEntity;
NoteDTO note = new NoteDTO();
notes = notes.Where(s => s.FunctionalityId == functionalityID && s.FunctionalityDataId != 0).ToList();

//Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult();
//pr.ContainerId = "NoteHistoryContainer";
//pr.ViewName = "ViewNotes";
//pr.Model = notes;
//return pr;

return Json(new { success = true, model = notes }, "application/json", Encoding.UTF8, JsonRequestBehavior.AllowGet);
}

Daniil
Nov 29, 2013, 2:47 PM
Hi @alscg,


But unable to assign or baing that model to child partial view again.


Do you mean that

data: { nodeID: id, NodeText: text }
is not passed to the controller action?

alscg
Dec 02, 2013, 5:15 AM
Hi @alscg,



Do you mean that

data: { nodeID: id, NodeText: text }
is not passed to the controller action?

Thanks for your quick reply.
No , It is passing to controller. but I have a problem to open or refresh child partial view as per that NodeID and Node Text.
I am trying to reload or open child partial view from javascript -


var ShowNoteHistory = function (id, text) {
$("#TplNoteHistory").empty();
$.ajax({
url: '@(Url.Action("ShowNoteHistoryByNode","Note"))',
data: { nodeID: id, NodeText: text },
datatype: "json",
type: "GET",
success: function (data) {
//data contains List<model> for tpl (right side partial view)
App.PnlTpl.load(data);
}
});

};



In above javascript success function, I have model in data variable which is filtered by NodeID and NodeText.
I need to pass that or assign that model to child partial view to refresh it with new data.
Please suggest me the way for -
How to pass model to partial view from javascript and reload it?
or How to reload partial view from controller itself with filtered model / new data as per nodeID and Text selected by user?

Daniil
Dec 02, 2013, 2:01 PM
1. A DirectEvent or DirectMethod call to a controller action returing a PartialViewResult.
http://mvc.ext.net/#/Dynamic_Partial_Rendering/Add_Tab/

The Model data you can send as parameters.

or

2. A container's Loader with AutoLoad="false". Just call a container's reload method when you need to reload the container.
http://mvc.ext.net/#/Dynamic_Partial_Rendering/Partial_Items/