I have been searching for a solution this problem for quite some time, including browsing the message board here. To start off, I will refer to an existing post:
I have used the most popular solution, and the controller successfully runs the query:
[HttpGet]
public ActionResult LoadBidders(int Id)
{
List<tblWinLossBidderMap> bidders = _context.tblWinLossBidderMaps.Where(p => p.WinLossID == Id).ToList();
return PartialView("_WinLossBidderView", bidders);
}
The Javascript
$(document).ready(function () {
$("#pY").on("click", function () {
var temp = $("#WinLossID").val();
$.ajax({
url: "/WinLoss/LoadBidders",
type: "GET",
data: { Id: temp }
})
.done(function(partialViewResult) {
$("#BidderCompany").html(partialViewResult);
});
});
});
The problem I have is that when the controller exits, back into the Javascript, I get an exception "Microsoft.CSharp.RuntimeBinder.RuntimeBinderException", "Cannot convert null to 'bool' because it is a non-nullable type value".
Note that the partial view uses a foreach to display the data. Ideally, once this is working, I will take the code snippet and append it after another jquery function that actually adds to this list. The effect is the user would fill in part of a larger form (like master/detail), click a button, a record would be added, and then this routine would update the partial view with the updated information. I doubt this part is important, but just including it for completeness.
Is there some something missing from my code?
Note that I am using Visual Studio 2015.
Related
first post. Trying so solve an issue I am seeing here between my Razor view and model. I have a popup window that is being fed a partial view and model.
public IActionResult ClickedCovid19Question(int id)
{
var existingQ = db.CustomerInfoItems.Find(id);
var suffix = existingQ.Suffix;
if (suffix.Length == 2)
suffix = suffix.Insert(0, "0");
var salesman = SalesmanHelper.GetSalesmanNum();
var par = db.Pars.Where(p => p.AccountNo == existingQ.CustNum).Where(p => p.Suffix == suffix)
.Where(p => p.SalesmanNumber == salesman).FirstOrDefault();
var clickedCovid19Model = new ClickedCovidQuestionModel
{ //insert model data here }
clickedCovid19Model.Machines = db.MachinePopulationItems
.Where(m => m.CustNum == existingQ.CustNum)
.ToList();
return View("~/Views/Covid19/_ClickedCovid19Question.cshtml", clickedCovid19Model);
}
This works great on the first page render. I see the data fill my UI elements that are called from the #model on the razor page. When my user updates a field here and submits, I use this function
function SaveClickedCovid19Question(idJS) {
C19ParChanged('#Model.Par');
var jsonJS = SerializeForm("#c19QuestionForm");
$.ajax({
url: '/Covid19/SaveClickedCovid19Question',
type: 'GET',
data:
{
id: idJS,
json: jsonJS
},
success: function (data) {
Alert(data);
RefreshLV("CovidQuestions");
HideWindow("#Covid19Question");
},
error: function (data, error, e2) {
debugger;
}
});
}
However, after the popup window is closed, and another popup is opened, we call that same ClickedCovid19Question IActionResult to populate our form again. It populates the UI fine with the new model it generated, debugging shows it creates a new model with all the correct data.
The issue arrises when a user submits this form again, the model on the Razor view seems to think it is still the model of the very first submission. An example of this is the first line of the javascript function. When the razor view was created, it had the correct #Model.Par data, as I could see when I created a few elements to display it. However, when trying to capture that data using #Model.Par, it captures the original Model.Par data.
Long story short, subsequent popups don't overwrite the Model data from the very first one. I am stumped, because this system works in so many other areas of our codebase.
I can fix this buy creating hidden elements that will store the data I need to send in any requests, but I feel like there has to be a better answer than that.
Edit: Below is an example I was using to test. The view part below will always display the correct par data in the id=parID input box. However, on the second popup and everytime after, if I was to run the simple javascript function below to find the data held by model, it will ALWAYS update to the data from the first model the page ever rendered, which seems inconsistent with other areas of my code that do work normally.
function updateParID() {
$("#c19QuestionForm").find("#parID").val('#Model.Par');
}
<input id="parID" type="text" disabled="disabled" value="#Model.Par"/>
<partial name="Forms/_FormDropDown" model=#(new FormDropDownModel { Name = "Par", Values = Lists.ParStates(), Value = Model.CallsPerYear}) />
<button type="submit" onclick="RefreshWindow('#Model.ID')">Refresh</button>
<button type="submit" onclick="updateParID()">Update Par ID</button>
That #Model.Par (or whatever prop you have in #Model) renders before anything shows up in browser.
Razor page will render your view and then pass it to browser.
so if you want to fetch data using ajax you should manually put data received from ajax into you html controls.
Have a nice coding day :)
So, I actually ended up solving this. My issue was, trying to bind the data from the #Model.Par or any model data INSIDE a javascript function will ALWAYS bind using the initial model. Every subsequent call to this function will ALWAYS only use that very first model.
My solution that I overlooked was to actually send the data to the function from the model as a parameter first, and not try to bind it inside the javascript function.
Example: My edit has these lines
function updateParID() {
$("#c19QuestionForm").find("#parID").val('#Model.Par');
}
<button type="submit" onclick="updateParID()">Update Par ID</button>
When I change the order of how I capture that model to this:
function updateParID(parID) {
$("#c19QuestionForm").find("#parID").val(parID);
}
<button type="submit" onclick="updateParID('#Model.Par')">Update Par ID</button>
This now correctly captures the model data that is present. I am sure there is some reason javascript works this way, but it is unknown to me, if anyone can shed light on it. Forgive me if it is a simple answer, I am new to web programming. Thank you all for helping out!
I have a View which is the container for a PartialView. Let's say a Customer - Orders relation. The View should received a CustomerViewModel whereas the PartialView a collection of Orders, such as IEnumerable<OrderViewModel>.
I basically have two ways of doing this (not to mention Angular), either Razor or jQuery. With Razor was pretty straightforward by utilizing #Html.Partial("_CustomerOrdersPartial", Model.Orders). But let's assume I cannot use Razor syntax and here it is how I ended up posting this question. I have read many posts on this matter but, most of them (not to mention all), suggest to use $("#container").load('#Url.Action("ActionName", new { parameterX = valueY })). Then here are my questions:
Why to mix Razor and jQuery?
Is this the only way?
Is there any way to call the View and pass the model?
The last question has to do with the fact that the above code requires an action on the server-side to be called, whereas the #Html.Partial("_CustomerOrdersPartial", Model.Orders) mentioned above will just call the View (client-side) and send the given Model in.
Any idea on how to solve this would be really helpful.
Thanks in advance for your time and thoughts.
my solution is:
function ReturnPanel(div, panel) {
$.ajax({
type: "POST",
url: "#Url.Action("GetPanel", "ControllerName")",
data: JSON.stringify({ 'idCurso': idCurso, 'panel': panel }),
contentType: 'application/json; charset=utf-8',
success: function (response) {
$("#" + div).html(response);
},
error: function (xhr, status, errorThrown) {
//Here the status code can be retrieved like;
alert("Error: status = " + xhr.status + " Descripcion =" + xhr.responseText);
}
})
}
in cs.
[HttpPost]
public ActionResult GetPanel(int idCurso, string panel)
{
Contenido contenido = new Contenido();
contenido.IdCurso = idCurso;
return PartialView(panel, contenido);
}
This code should do it. The trick is to acquire the URL and then make sure you get the parameter list right. I used a little Razor to get the URL but you don't have to. Also, If you fail to match the parameter list, your call will not even be acknowledged. You have been warned. I tried to name every thing in a way that helps.
var url = '/controllerName/ActionName';
$('#pnlFillMee').load(url, {NameOfParam: $('#elementID').val() },
function () {CallMeAfterLoadComplete(); });
Here's a real world example I use at work. ReviewInfo is an action in the
controller associated with this page. It returns a partialview result.
$(document).ready(function () {
var url = '/supervisor/reviewinfo';
$('#pnlReviewInfo').load(url, { FCUName: $('#FCU').children(':selected').text(), AccountsFromDate: $('#AccountsFrom').val()}, function () {
InitializeTabs(true);
});
});
This goes somewhere on your form.
<div id="pnlReviewInfo" style="width: 85%"></div>
EDIT:
I would also look up the other jQuery functions like $.get, $.post and $.ajax which are more specialized versions of $.load. and see this link which might answer all your questions about passing models:
Pass Model To Controller using Jquery/Ajax
Hope this helps
wrapping up this question and thanks to #stephen-muecke and #charles-mcintosh for their help:
Using #Html.Partial(partialViewName) the server returns a string resulting from the partial view passed in. Preferred method if you need to manipulate the partial before being displayed. Otherwise, using #Html.RenderPartial(partialViewName) will write into the stream output sent to the browser, the HTML code from the given partial.
As per jQuery API, $(elem).load(url[,data][,complete]) will place the returned HTML into the matching element. Thus, it requires an action method for the given url.
If for whatever reason Razor cannot be used on the UI, chances are you would likely end up either hard-coding the url like in the sample code provided above by #charles-mcintosh or using Angular.
I am building a solution using asp.net MVC and it is my first time doing so.
The problem
After the solution has been running for some time the controllers become unresponsive. The client side works fine, and when calling a controller using ajax, the controller begins excecuting, but whenever it hits the first line it stops excecution. The ajax call is still waiting for a responce, and I am able to make a new request (that also stops). It does not throw any errors, it just stalls. This happens both when debugging or "start-without-debugging".
Entity framework is used within some of these controller methods for database calls, if it has anything to do with the error.
I am suspecting that one of these things must be done, but I am not certain at all:
Is this only an issue because I am using localhost?
Are there some settings describing maximal runtime? Is there a specific thing
I must do whenever a controller is called?
Does the database has anything to do with the stalling?
I am not sure what code to attach, since this error seems to happen after some time, and not specific to a controller or method. Let me know if there is something you want to see.
Edit
I'm adding one ajax call as example, but note that the ajax call is working. It is the controllers (Not only RemoveTest-controller) that stalls and only after debugging for some time.
$.ajax({
type: "POST",
url: "/RemoveTest/RemoveByPlacement",
data: { input: someInput},
dataType: "json",
success: function (data) {
alert(data);
},
error: function () {
alert("Error");
}
});
Edit 2
I should maybe say that it is not only happening when using ajax. The problem also happens when opening a new page, since this also needs execution from a controller.
UPDATE
This may be an issue with the database. I have inserted var a = 10; to my controller, and this is getting executed. But it stops after trying to execute the line after.
[HttpPost]
public JsonResult RemoveById(string id)
{
var a = 10;
TestReciving test = db.TestRecevings.FirstOrDefault(x => x.Id == id);
Placement placement = db.Placements.FirstOrDefault(x => x.TestRecivingIdRef == id);
...
}
UPDATE
I did what Mark Homer said. Even though this had to be fixed, it did not solve my problem. When running in IE I get a HTML1300 (navigation occurred) message when changing page, but when it halts and I try to open the file I get "http://localhost:51140/Account/Login could not be opened". It seems to me that IIS Express stops responding, even though it keeps running.
The controller looks like this now:
[HttpPost]
public JsonResult RemoveById(string id)
{
using (var db = new DatabaseContext())
{
TestReciving test = db.TestRecevings.FirstOrDefault(x => x.Id == id);
Placement placement = db.Placements.FirstOrDefault(x => x.TestRecivingIdRef == id);
...
}
}
So I finally got it to work. The issue was a two-headed giant which was why I had troubles pinning it down.
First issue
Mark Homer said to use using when I used the database. I did this and while it solved a subset of the issue, it did not solve it completely. But from this day I will remember to use using.
Second issue
I was not able to track it down to something specific, but I created a new project and moved my files into it (except the auto generated once). Since doing this have have not been able to reproduce the problem. I tried using GitHub to find differences in the two solutions, but only to find that the non-working project had different framework versions. It really bugs me, that I can not pin down the reason, but at least it works.
Thanks for your responses, guys.
I'm in a bit of a bind here, I am trying to submit a form using ajax, all goes well and dandy until after the server has done it's thing, it decides to load to the action onto a new page, which is exactly what I do not want.
Here is my controller
[HttpPost]
public ActionResult Submit(int id, string trainingProgramId, FormCollection form, User user)
{
//Do Some action
return null;
}
In a different controller I have it set up to do $return PartialView(model);
this is the JQuery code that I am using.
$(function () {
$("form").submit(function (e) {
if (nextquestion()) { //check if posting can proceed
$.ajax({
type: "POST",
data: $(this).serialize(),
url: $(this).attr("action"),
success: function (response) {
alert(response);
$('#cases:last-child').insertAfter(response);
},
error: function (data) { }
});
}
e.preventDefault();
});
});
In all cases I am being redirected to a different url after performing the operation. Which is not the intention, especially if my intention might be to load more stuff into the page.
I've been tring everything, a bunch of solutions, but once my controller does a return statement the page automatically reloads to $/Submit
I have added $ #Scripts.Render("https://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"); to my scripts
From any other example I am finding this should work as I want it to, by remaining on the same page, however I am finding it difficult to understand who is responsible for changing the page either way. When I return my PartialView, a completely new page loads with the model as I've had it set up for the Partial View to be inserted originally.
Anyone care to explain what is going on or why my code is wrong?
I can't find it after a whole day of trying to debug.
My app has a "Show all comments" similar to the one in Facebook. When the user clicks on the "show all" link, I need to update my list which initially has upto 4 comments with all comments. I'll show some code first and then ask some questions:
jQuery:
ShowAllComments = function (threadId) {
$.ajax({
type: "POST",
url: "/Home/GetComments",
data: { 'threadId': threadId },
dataType: "json",
success: function (result) {
alert(result);
},
error: function (error) {
alert(error);
}
});
};
Home Controller:
// GET: /GetComments
[HttpPost]
public JsonResult GetComments(int threadId)
{
var comments = repository.GetComments(threadId).ToList();
return Json(comments );
}
Questions:
When I tried GET instead of POST, I got this error: "This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet." Is POST usually recommended instead of GET when making these ajax requests? If not, how do I get it to work with GET? Where do I set JsonRequestBehavior to AllowGet?
After changing it to POST, I now get this error: A circular reference was detected while serializing an object of type 'Models.Thread'. I'm using Entity Framework 4, and I've read that adding a [scriptignore] attribute on the navigation property would resolve this, so I added a partial class of the entity with the property, it said "property is already defined". How do I then deal with this because I can't directly modify the code generated by EF4.
Set in the return Json. I would just use post, but if you want to make it hard on your self, use get.
public JsonResult blah()
{
return Json("obj", JsonRequestBehavior.AllowGet);
}
It is true when most ORM objects get serialized the serialization tries to searlize the hidden goodies the ORM needs, AND (sounds like your case) all of the lazy load stuff... this causes bad mojo. Can I throw a suggestion out? Why not let MVC do what its good at and generate the view for you? You could just use the jQuery .load and use a view.
Answers:
try return Json(comments, JsonRequestBehavior.AllowGet); There are good reasons for the default behavior though.
for anything going down the wire, you are going to really want to create a very simple view model object rather than sending your domain entity down the wire. Lots of fancy things happen in the EntityFramework that don't work with serialization as you are finding out.