two forms with same input id in asp.net mvc

Question

I have multiple forms on a page which pass an id to the controller via hidden inputs. As I am using strongly typed views for these I think I need to keep the Id for each of these to be the same. It works currently though I think it's bad practice. How should I handle this? In Django there are form prefix values is there an equivalent?

Avoid duplication of form input element ID in Django

Here are the two forms I am using:

        <form action="/Course/CropImage" method="post"> 
            <input id="CourseId" name="CourseId" type="hidden" value="<%= Model.CourseId %>" />
            <input id="X" name="X" type="hidden" value="<%= Model.X %>" />
            <input id="Y" name="Y" type="hidden" value="<%= Model.Y %>" />
            <input id="W" name="W" type="hidden" value="<%= Model.W %>" />
            <input id="H" name="H" type="hidden" value="<%= Model.H %>" />
            <input type="submit" value="Crop" />
        </form>

        <form action="/Course/UploadImage" enctype="multipart/form-data" method="post">
            <input id="CourseId" name="CourseId" type="hidden" value="<%= Model.CourseId %>" />
            <label for="Image">Select Image:</label><input id="Image" type="file" name="Select Image"/>
            <input type="submit" value="Upload" />
        </form>

Could you show the code of your view page? – Darin Dimitrov Nov 22 '09 at 10:27 — Darin Dimitrov, Nov 22 '09 at 10:27

score 5 · Accepted Answer · edited Nov 13 '15 at 09:47

If you are having 2 view models (one for the crop, one for the upload) you can prefix them like this (you can use html helpers):

    <form action="/Course/CropImage" method="post"> 
        <input id="Crop_CourseId" name="Crop.CourseId" type="hidden" value="<%= Model.CourseId %>" />
        <input id="Crop_X" name="Crop.X" type="hidden" value="<%= Model.X %>" />
        <input id="Crop_Y" name="Crop.Y" type="hidden" value="<%= Model.Y %>" />
        <input id="Crop_W" name="Crop.W" type="hidden" value="<%= Model.W %>" />
        <input id="Crop_H" name="Crop.H" type="hidden" value="<%= Model.H %>" />
        <input type="submit" value="Crop" />
    </form>

    <form action="/Course/UploadImage" enctype="multipart/form-data" method="post">
        <input id="Upload_CourseId" name="Upload.CourseId" type="hidden" value="<%= Model.CourseId %>" />
        <label for="Image">Select Image:</label><input id="Upload_Image" type="file" name="Upload.Image"/>
        <input type="submit" value="Upload" />
    </form>

and then bind attribute with the prefix to you controller actions like this:

public ActionResult CropImage([Bind(Prefix="Crop")]CropViewModel viewModel)
{
  // do something
}


public ActionResult UploadImage([Bind(Prefix="Upload")]UploadViewModel viewModel)
{
  // do something
}

For anyone trying to do the same with the new strongly-typed template system, you just put a prefix in the appropriate overload of a *For function for `htmlFieldName`: `Html.EditorFor(m => m.SomeComplexCropProperty, null, "Crop")`. The `null` in `templateName` sets it up to use the default but it can be overridden as well. — patridge, Sep 14 '10 at 15:35
@patridge Good tip. And if you use editor templates for the whole model you can also specify the prefix like this: `Html.EditorForModel(null, "thePrefix")`. — Jakub Januszkiewicz, Nov 13 '15 at 09:01

score 1 · Answer 2 · answered Nov 22 '09 at 11:31

1

This is not a bad practise. They are completely different forms so that makes the input element unique. You will not make your server code or client js/markup any more semantic by adding prefixes.

answered Nov 22 '09 at 11:31

Matt Kocaj

11,278
6
51
79

4

The OP had the ID's the same on two different HTML elements this is bad pratice. Same name is fine. Same ID is a violation of HTML and one that actually matters, what will getElemenetById return? – David Waters Jun 26 '10 at 22:27
@David: I didn't see that. But you're right, same IDs is bad yes. – Matt Kocaj Jun 28 '10 at 05:00

score 0 · Answer 3 · answered Nov 22 '09 at 10:53

0

I always prefix my column-names with the table name. Here's the database-layout of my latest MVC-project (using strongly typed views and LINQ to SQL):

WeblogEntries:
- WeblogEntryId
- WeblogEntryHeaderText
- WeblogEntryBodyText
- WeblogEntryDate

WeblogComments:
- WeblogCommentId
- WeblogCommentBodyText
- WeblogCommentDate

WeblogErrors
- WeblogErrorId
- WeblogErrorExceptionMessage
- WeblogErrorExceptionStackTrace
- WeblogErrorDate

These naming conventions work great with the entity classes that gets generated using dbml-files.

answered Nov 22 '09 at 10:53

cllpse

21,396
37
131
170

3

Why would you add unnecessary characters like that? Maybe in MSAccess tables, but .NET is strongly typed. Surely there is no gain for adding extra complication like this? – Matt Kocaj Nov 22 '09 at 11:33
I do this to avoid encountering the problem you are describing in your question :) But perhaps I'm misunderstanding your question? – cllpse Nov 22 '09 at 18:00

two forms with same input id in asp.net mvc

3 Answers3

Linked