last day (15 days later) » 

7:05 PM
0
Q: Save not pulling data

Dominik WillafordWhen I click on my save button it triggers my Edit Action method, but it doesn't pull any of the data that was marked as editable. which cause it to error out with the error 'Object reference not set to an instance of an' object. I'm hoping to have the end result be when I open up my table after ...

 
Please remove the commented-out code from the post.
 
I added my Javascript as well to better display what I'm doing, but I have bound this to a model that is updated through the controller as well.
@mason I just haven't finished that portion yet, but that isn't what I'm worried about with this application.
 
Your Edit action method is expecting form data but you're sending JSON data.
 
Okay how can I change the data I'm sending to form data? @madreflection
 
When you intercept the click, copy the inputs into hidden inputs within the form (use Html.HiddenFor) and then call the form's submit function.
 
7:05 PM
@madreflection Would you write that up as an example answer as I'm not following.
 
Maybe, as a function of available time.
 
@madreflection can you still use html.HiddenFor when using <input type="date" />
 
HiddenFor emits an input tag with type="hidden", so the type won't be "date", but what I think you're really asking is if you can use HiddenFor in one place and EditorFor in another with the same DateTime property. Yes?
 
7:20 PM
yeah I believe so I would use an html.editorFor, but the problem that I am facing is that when I go to edit that it doesn't edit within that editorFor it edits in another table that also uses the same editorFor. This is why I was trying to use the <input />
 
Another table?
 
Yes I have two tables within the same form I was just trying not to flood the question with a ton of lines of code
@using (Html.BeginForm())
{

<table class="table">
<tr>
<th>Senator Information</th>
<th>Monthly Expense Summary</th>
<th>Expense Month/Year</th>
</tr>
<tr>
<td>State Senator</td>
<td>Mileage Total:<br />Expense Total:<br /><strong>Total:</strong></td>
<!--This will become a datepicker-->
<td>@Html.EditorFor(model => model.ExpMonthYr, new { htmlAttributes = new { @class = "datepicker", Name = "expenseDate" } })</td>
</tr>
</table>

<h3>MILEAGE TO LANSING</h3>
<table class="table">
<tr>
<th>Travel Date:</th>
That is the first table
 
Where did the form end? (the } isn't shown)
 
right after the submit
 
OK
So let's talk about that form for a minute...
 
7:28 PM
okay
 
The model you're passing to the view is of type LansingMileage?
 
I'm actually passing in my viewmodel called LansingMileageViewModel which contains an IEnumerable of LansingMileage which is my actual model
 
I'm trying to bounce around this tab and your last three questions in separate tabs to try to understand what's happening.
It took me a minute but I see that now.
 
I understand
I have never done a project of this type where I have to have both the create, delete, and edit functionality all within on view which has made it very difficult
 
A quick recommendation: name your model to correspond with the action method that uses it. So for example, IndexViewModel for the Index action method. Class names will get very confusing if you don't have some form of organization.
 
7:35 PM
Alright thank you for the recommendation
 
So you have properties named ExpMonthYr, TravelDate, and TripType on the LansingMileageViewModel class. Then you have the same properties on each LansingMileage class, as well?
 
I don't have TripType in the LansingMileageViewModel, but yes
 
Why do you have a select for it in the table above?
 
I get the triptype data by doing string triptype = Request.Form["triptype"] then storing it into lansing.TripType
I did that because at the time I didn't know how to do @html.dropdownlist
I was looking at changing to this because I figure it would be more efficient and work better with your html.hiddenFor that you recommended earlier.
 
Okay, it looks like you have things mixed up a bit. There's a fairly clear separation you can make between "header" and "detail" level information.
(reusing terms that are used in orders, order header, order detail...)
 
7:42 PM
okay....
 
No. I may have misunderstood. The top form is how you're creating new records and then they're going to be displayed in the second table, and editable in-row?
 
Okay... so the "editing in the other table" problem has to do with the fact that your selectors are using ID selectors but you're naming multiple elements with the same id. That's not allowed, but functionally it will usually select the first one in the document, which is the one in the first table.
 
basically unlike the typical way of having to create and edit data in mvc I'm doing it all in one page
 
We'll overlook that.
 
7:45 PM
okay
 
So what I would recommend is that you take a step back and rebuild. Here's how...
Do something with the second table. Stash (Git) or shelve (TFS) what you have (you are using source control, right?). Then strip the second table down to just displaying values. Verify that adding still works.
Remove everything from your code that doesn't support exactly those purposes.
 
yes I'm using source control
 
(which one?)
 
Then, start building the inline editing form in the table cell. It'll be simple...
@using (Html.BeginForm("Edit", "LansingMileage", HttpMethod.Post))
{
@Html.AntiForgeryToken()
@Html.HiddenFor(m => item.RowIndex)
@Html.HiddenFor(m => item.ExpMonthYr)
@Html.HiddenFor(m => item.TravelDate)
@Html.HiddenFor(m => item.TripType)
<button class="save-user edit-mode" type="submit" name="Save">Save</button>
}
 
7:51 PM
Okay so I need to strip down the second table so it just displays the data that has been add to the database then do that
With that code will I still need to add my drop down menus add calendars or will it take care of that?
Sorry for all the questions
 
Right. This is just for the cell that contains the Save button.
You'll still need other cells for the controls the user will interact with.
 
Notice that it's m => item because you want to bind the item, not the top-level model.
 
What's the identifying value (primary key) for a LansingMileage record?
(RowIndex doesn't sound right because it suggests it's just a matter of ordering and that can change.)
 
7:55 PM
That is the primary key
its a weird name i know
 
As long as it's unique and immutable.
 
Here's where it gets a bit tricky: RowIndex in the model class needs to be nullable if you want the Edit method to function as both "create" and "update" actions.
 
why would I need it to create I already have a method that handles that
 
Didn't see it.
 
7:58 PM
public ActionResult Index([Bind(Include = "ExpMonthYr,TripType,TravelDate")] LansingMileage lansing)
{

string expenseDate = Request.Form["expenseDate"];
string travelDate = Request.Form["travelDate"];
string triptype = Request.Form["triptype"];
//for testing won't be in production
//MessageBox.Show(expenseDate);
//MessageBox.Show(travelDate);
//MessageBox.Show(triptype);
//expenseDate.Split(',');
lansing.ExpMonthYr = Convert.ToDateTime(expenseDate);
lansing.TravelDate = Convert.ToDateTime(travelDate);
 
Don't reuse Index for that.
 
why would it matter?
 
Post to New or Edit and the redirect back to Index.
Maintainability.
 
MVC is about separation of responsibility. Right now, you have responsibilities conflated.
 
7:59 PM
oh
 
Index fetches a list. New creates. Edit updates. Delete...deletes.
 
Okay I'm adding that to my list of things to do
 
A view (such as Index in your case) can show forms for multiple actions. Each action should be handled by its action method.
 
So the user navigates to /LansingMileage and hits LansingMileageController.Index. It fetches the mileage records and sends that model to the Index view.
The Index view shows a form for adding mileage records and a list of the mileage records that already exist.
 
8:04 PM
oh okay and right now I'm over complicating it giving it more task then it should
 
The user can submit a new record from the top form. That POSTs to the `New` action method. It creates the record and the redirects back to the `Index` action
using `RedirecToAction("Index")`.
 
okay this is making more sense now
 
The user realizes that [s]he made a mistake and clicks the Edit button in the row. The row converts to edit mode (details skipped). The user presses the "Save" and it submits to the Edit action method. Edit saves updates the record and again redirects to the Index action.
And of course, you have the Delete action figured out.
We have the high-level stuff. Now we just have to dig into how to get the changes submitted to the Edit action method.
 
Okay so really step one is to get my action methods reconfigured then verify data is still being added to the database. Then make sure when the user clicks edit and save that data is being sent.
 
Sounds solid.
You still need to do a little trickery in order to get the form working, but I think you're starting to see the organization a little clearer now.
 
8:09 PM
yeah I am
 
Now, refer back to the Html.BeginForm call I showed earlier.
 
One quick question does the index action method need a post method
ok
 
No.
Good question.
 
ok cool
 
In fact, the way you'll be using New and Edit, you won't need "GET" variations of those. That's uncommon but not wrong.
In addition to that form with the Save button, you'll need td tags with the EditorFor variations. Those will exist outside the form; they won't ever be submitted.
Now, we finally get to what I said earlier about intercepting the submission of the form.
$(".save-user").on('click', function() {
var tr = $(this).parents('tr:first');

var form = tr.find("form");

['ExpMonthYr','TravelDate','TripType'].forEach(function(name) {
form.find("input[name='" + name + "']").val(tr.find("[name='" + name + "'].edit-mode").val());
});

form.get(0).submit();
});
What that should do (totally untested) is iterate through the three field names and set the hidden input to the value in the field shown by the EditorFor calls that are outside the form.
 
8:15 PM
okay now taking a step back real quick
 
Sure.
 
what do you mean it won't need the GET
just want to make sure I understand this
 
The method marked `[HttpGet]` (or not marked) will handle GET requests. Usually, you navigate to `/Thing/Edit/1` and it shows a form with the data. The signature would be:
public ActionResult Edit(int id)
Then you would have another method marked `[HttpPost]` to which the form is posted back.
[HttpPost]
public ActionResult Edit(EditModel model)
The model parameter is an object populated using "model binding" and contains properties for each of the inputs on the form.
 
So again, separation of responsibilities: one GETs the existing record and displays the form, the other one handles the POSTed new values.
 
8:18 PM
k
 
But because your form is on the Index view, there's no need for the GET overloads of those actions.
 
Anyway, there are some things you'll need to play around with on your own still, although it should all be isolated to the in-row editing. And as long as you're not using ID selectors (e.g. #ExpMonthYr), you won't have a problem with targeting the wrong element.
 
alright
Thank you so much for the help
I learned a lot
 
I'm glad I was able to help.
When you're done with this project, I encourage you to try doing something "the normal way" where the one method gets the data (if any) and displays a form, and then the other handles the POST from the form. If nothing else, it'll help you understand what this code is doing better.
 
8:25 PM
okay will do
 
Cool. As Frank said last time, Happy Coding!
 

last day (15 days later) »