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?

http://stackoverflow.com/questions/1252826/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>

Answer 1

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.

Answer 2

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.

Answer 3

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
}