c# - AJAX request for a loaded partial view -MVC -
the concept behind question whenever value shown in id textbox, value id pulls information corresponding id in partial view right of page via ajax , javascript.
i have partial view showing on right there error alert chrome cant populate partial view, shows empty partial view (textbox etc). i've tried researching problem cant find relating html.partial() instead has tutorials on views in page don't want. ideas on going wrong? below code regarding issue.
im still getting grips ajax apologies silly mistakes.
jobscanner.cshtml
<div id="qr"> <div id="first"> <p>hold qr code in front of webcam.</p> <video id="camsource" autoplay="" width="320" height="240">webcam has failed, please try another</video> <canvas id="qr-canvas" width="320" height="240" style="display:none"></canvas> @* <div class="hidden">*@ <input type="text" id="qr-value" value="" placeholder="scanned qr code..." /> <input type="text" id="qr-number" value="" placeholder="job id...." /> <button>reset scan</button> @* </div>*@ </div> <div id="second"> <div id='sample'> <p class="hide">@html.partial("camerainfo")</p> </div> </div> </div> qrview.js
$(document).ready(function () { $("#qr").show(1000); $("button").click(function () { $("#qr-value").val("") $("#second").hide(500); }); }); $(document).ready(function () { $('#qr-value').on('change', function () { var string = $('#qr-value').val(); if (~string.indexof('job')) { var num = string.match(/\d+/g); $("#qr-number").val(num).change(); $("#second").show(1000); } else { $("#qr-number").val("") $("#second").hide(500); } }); }); $(document).ready(function () { $('#qr-value').on('change', function () { $.ajax({ type: "get", url: '@url.action("edit", "camerainfo")', data: { id: $('#qr-number').val() }, success: function (response) { $('#sample').html(response); }, error: function (response) { if (response.responsetext != "") { alert(response.responsetext); alert("some thing wrong.."); } } }); }); }); camerainfo.cshtml (partial view)
@model jobtracker.models.job <h2>edit , confirm</h2> @using (html.beginform()) { @html.validationsummary(true) <fieldset> <legend>job</legend> @* @html.hiddenfor(model => model.jobid) <div class="editor-label"> @html.labelfor(model => model.locationid, "location") </div> <div class="editor-field"> @html.dropdownlist("locationid", string.empty) @html.validationmessagefor(model => model.locationid) </div><br />*@ <div class="editor-label"> @html.labelfor(model => model.highpriority) </div> <div class="editor-field"> @html.dropdownlistfor(model => model.highpriority, new selectlist( new[] { new { value = "yes", text = "yes" }, new { value = "no", text = "no" }, }, "value", "text", model )) @html.validationmessagefor(model => model.highpriority) </div><br /> <div class="editor-label"> @html.labelfor(model => model.comments) </div> <div class="editor-field"> @html.textareafor(model => model.comments) @html.validationmessagefor(model => model.comments) </div><br /> <div class="editor-label"> @html.labelfor(model => model.status) </div> <div class="editor-field"> @html.dropdownlistfor(model => model.status, new selectlist( new[] { new { value = "in progress", text = "in progress" }, new { value = "completed", text = "completed" }, new { value = "not started", text = "not started" }, new { value = "stopped", text = "stopped" }, }, "value", "text", model )) @html.validationmessagefor(model => model.status) </div><br /> <p> <input type="submit" value="save" /> </p> </fieldset> } @section scripts { @scripts.render("~/bundles/jqueryval") } camerainfocontroller.cs
[httpget] public actionresult edit(int id = 0) { job job = db.jobs.find(id); if (job == null) { return httpnotfound(); } viewbag.locationid = new selectlist(db.locations, "locationid", "locationname", job.locationid); viewbag.orderid = new selectlist(db.orders, "orderid", "orderid", job.orderid); return partialview("camerainfo", job); } error google
<!doctype html> <html> <head> <title>the resource cannot found.</title> <meta name="viewport" content="width=device-width" /> <style> body {font-family:"verdana";font-weight:normal;font-size: .7em;color:black;} p {font-family:"verdana";font-weight:normal;color:black;margin-top: -5px} b {font-family:"verdana";font-weight:bold;color:black;margin-top: -5px} h1 { font-family:"verdana";font-weight:normal;font-size:18pt;color:red } h2 { font-family:"verdana";font-weight:normal;font-size:14pt;color:maroon } pre {font-family:"consolas","lucida console",monospace;font-size:11pt;margin:0;padding:0.5em;line-height:14pt} .marker {font-weight: bold; color: black;text-decoration: none;} .version {color: gray;} .error {margin-bottom: 10px;} .expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:hand; } @media screen , (max-width: 639px) { pre { width: 440px; overflow: auto; white-space: pre-wrap; word-wrap: break-word; } } @media screen , (max-width: 479px) { pre { width: 280px; } } </style> </head> <body bgcolor="white"> <span><h1>server error in '/' application.<hr width=100% size=1 color=silver></h1> <h2> <i>the resource cannot found.</i> </h2></span> <font face="arial, helvetica, geneva, sunsans-regular, sans-serif "> <b> description: </b>http 404. resource looking (or 1 of dependencies) have been removed, had name changed, or temporarily unavailable. please review following url , make sure spelled correctly. <br><br> <b> requested url: </b>/qr/@url.action("edit", "camerainfo")<br><br> <hr width=100% size=1 color=silver> <b>version information:</b> microsoft .net framework version:4.0.30319; asp.net version:4.0.30319.34212 </font> </body> </html> <!-- [httpexception]: public action method '@url.action("edit", "camerainfo")' not found on controller 'jobtracker.controllers.qrcontroller'. @ system.web.mvc.controller.handleunknownaction(string actionname) @ system.web.mvc.controller.<beginexecutecore>b__1d(iasyncresult asyncresult, executecorestate innerstate) @ system.web.mvc.async.asyncresultwrapper.wrappedasyncvoid`1.callenddelegate(iasyncresult asyncresult) @ system.web.mvc.async.asyncresultwrapper.wrappedasyncresultbase`1.end() @ system.web.mvc.controller.endexecutecore(iasyncresult asyncresult) @ system.web.mvc.controller.<beginexecute>b__15(iasyncresult asyncresult, controller controller) @ system.web.mvc.async.asyncresultwrapper.wrappedasyncvoid`1.callenddelegate(iasyncresult asyncresult) @ system.web.mvc.async.asyncresultwrapper.wrappedasyncresultbase`1.end() @ system.web.mvc.controller.endexecute(iasyncresult asyncresult) @ system.web.mvc.controller.system.web.mvc.async.iasynccontroller.endexecute(iasyncresult asyncresult) @ system.web.mvc.mvchandler.<beginprocessrequest>b__5(iasyncresult asyncresult, processrequeststate innerstate) @ system.web.mvc.async.asyncresultwrapper.wrappedasyncvoid`1.callenddelegate(iasyncresult asyncresult) @ system.web.mvc.async.asyncresultwrapper.wrappedasyncresultbase`1.end() @ system.web.mvc.mvchandler.endprocessrequest(iasyncresult asyncresult) @ system.web.mvc.mvchandler.system.web.ihttpasynchandler.endprocessrequest(iasyncresult result) @ system.web.httpapplication.callhandlerexecutionstep.system.web.httpapplication.iexecutionstep.execute() @ system.web.httpapplication.executestep(iexecutionstep step, boolean& completedsynchronously) --> i appreciate feedback :)
i think problem url in ajax - know since error message states it:
the resource cannot found.
requested url: /qr/@url.action("edit", "camerainfo").
the reason razor syntax not recognized in file.
either set js-variable partial view, like:
<!-- in end of partial view, or wherever referense js-file --> <script type="text/javascript"> var myjsurl = '@url.action("edit", "camerainfo")'; </script> //in js-file, assuming referensed partial view $.ajax({ type: "get", url: myjsurl, ... or type hand (the easiest solution):
$.ajax({ type: "get", url: '/camerainfo/edit', ... i should there no need keep writing $(document).ready before each method/call. once, , put code within scope of that.
edit:
also, you're binding 2 change events same textbox (#qr-value). merge code , keep 1 event:
$(document).ready(function () { $('#qr-value').on('change', function () { var string = $('#qr-value').val(); if (~string.indexof('job')) { var num = string.match(/\d+/g); $("#qr-number").val(num).change(); $("#second").show(1000); } else { $("#qr-number").val("") $("#second").hide(500); } $.ajax({ type: "get", url: '/camerainfo/edit', data: { id: $('#qr-number').val() }, success: function (response) { $('#sample').html(response); }, error: function (response) { if (response.responsetext != "") { alert(response.responsetext); alert("some thing wrong.."); } } }); }); });
Comments
Post a Comment