jquery - Load Partial view in ajax call -
i new mvc . started creating 1 project , faced 1 big problem. pls me this. explanation: have view 1 actionlink , loading 1 partial view
@model list<muthutag.models.loadpostmodel> @{ viewbag.title = "loadpost"; } @html.actionlink("add new post","post","home") <h2>loadpost</h2> <div> <table> @foreach (var item in model) { <tr> <td> @item.tagid </td> <td> @item.tagtitle </td> <td>@item.tagcontent</td> </tr> } </table> </div> in u can click add new post action link ill load view controller code
public actionresult post() { return view(); } it ill load view
@model muthutag.models.loadpostmodel @{ viewbag.title = "add new post"; } <script src="~/content/jquery-1.8.3-min.js"></script> <h2>post</h2> <link href="~/content/magicsuggest-1.3.1.css" rel="stylesheet" /> <script src="~/content/magicsuggest-1.3.1.js"></script> <div id="post"> <table> <tr> <td> @html.labelfor(m => m.tagid) </td> <td> @html.textboxfor(m => m.tagid) </td> </tr> <tr> <td> @html.labelfor(m => m.tagtitle) </td> <td> @html.textareafor(m => m.tagtitle) </td> </tr> <tr> <td> @html.labelfor(m => m.tagcontent) </td> <td> @html.textareafor(m => m.tagcontent) </td> </tr> </table> <div id="ms-tpl"></div> <script type="text/javascript"> $('#ms-tpl').magicsuggest({ width: 590, highlight: true, data: [{ id: 0, name: "c#", desc: "server code web applications in microsoft products", //image: "images/panda.png" }, { id: 1, name: "asp.net", desc: "active server page holds web tech.", // image: "images/butterfly.png" }, { id: 2, name: "silverlight", desc: "sliverlight microsoft product great ui design sets", // image: "images/dolphin.png" }, { id: 3, name: "mvc4", desc: "latest of microsoft web tech", // image: "images/elephant.png" }, { id: 4, name: "php", desc: "light weight server page", //image: "images/hippo.png" }, { id: 5, name: "sql", desc: "default database provider microsoft technologies", //image: "images/turtle.png" }], renderer: function (v) { return '<div>' + '<div style="float:left;"><img src="' + v.image + '"/></div>' + '<div style="padding-left: 85px;">' + '<div style="padding-top: 20px;font-style:bold;font-size:120%;color:#333">' + v.name + '</div>' + '<div style="color: #999">' + v.desc + '</div>' + '</div>' + '</div><div style="clear:both;"></div>'; } }); </script> <input type="button" value="click" id="click"/> <input type="button" value="save" id="register" /> </div> <div id="bind"></div> <script type="text/javascript"> var jsondata = []; var ms1 = $('#ms-tpl').magicsuggest({ data: jsondata, sortorder: 'name', maxresults: false }); $('#register').click(function () { debugger; var dataplus = ms1.getvalue(); var tagid = document.getelementbyid('tagid').value; var tagtitle = document.getelementbyid('tagtitle').value; var tagcontent = document.getelementbyid('tagcontent').value; $.ajax({ url: '@url.action("getpost")' + '?tagid=' + tagid + '&tagtitle=' + tagtitle + '&tagcontent=' + tagcontent + '&dataplus=' + dataplus, type: 'post', cache: false, success: function (data) { } }); }); $('#click').click(function () { debugger; alert(ms1.getvalue()); }); </script> [httppost] public actionresult getpost(profile model) { sqlconnection con = new sqlconnection(conn); con.open(); string tagid = request.params["tagid"]; string tagtitle = request.params["tagtitle"]; string tagcontent = request.params["tagcontent"]; sqlcommand cmd = new sqlcommand("createpostdetail", con); cmd.commandtype = commandtype.storedprocedure; cmd.parameters.addwithvalue("@tagid", tagid); cmd.parameters.addwithvalue("@tagcontent", tagcontent); cmd.parameters.addwithvalue("@tagtitle", tagtitle); //string name = session["username"].tostring(); string name = "123"; cmd.parameters.addwithvalue("@username", name); cmd.executenonquery(); con.close(); return view("index"); } so if user clicks save button goes controller
[httppost] public actionresult getpost(profile model) { sqlconnection con = new sqlconnection(conn); con.open(); string tagid = request.params["tagid"]; string tagtitle = request.params["tagtitle"]; string tagcontent = request.params["tagcontent"]; sqlcommand cmd = new sqlcommand("createpostdetail", con); cmd.commandtype = commandtype.storedprocedure; cmd.parameters.addwithvalue("@tagid", tagid); cmd.parameters.addwithvalue("@tagcontent", tagcontent); cmd.parameters.addwithvalue("@tagtitle", tagtitle); //string name = session["username"].tostring(); string name = "123"; cmd.parameters.addwithvalue("@username", name); cmd.executenonquery(); con.close(); return view("index"); } i return index added content ill display in main page remains in post view alone data saved in database. (simple way actionlink(post) -->load new view again loading home page remains in post view ).
make container div in main view:
@model list<muthutag.models.loadpostmodel> @{ viewbag.title = "loadpost"; } @html.actionlink("add new post","post","home") <h2>loadpost</h2> <div> <table> @foreach (var item in model) { <tr> <td> @item.tagid </td> <td> @item.tagtitle </td> <td>@item.tagcontent</td> </tr> } </table> </div> <div id="container"> </div> and in ajax call success function this:
$.ajax({ url: '@url.action("getpost")' + '?tagid=' + tagid + '&tagtitle=' + tagtitle + '&tagcontent=' + tagcontent + '&dataplus=' + dataplus, type: 'post', cache: false, success: function (data) { $('#container').html(data); } }); 
Comments
Post a Comment