MVC4 - Using standard <input> textboxes alongside HTML Helpers

Question

I like how MVC 4 generates the views with the HtmlHelpers already defined:

    <div class="editor-label">
        @Html.LabelFor(model => model.PartId)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.PartId)
        @Html.ValidationMessageFor(model => model.PartId)
    </div>

But for one field I added a jQuery autocomplete and now the textbox has taken the form of a standard input field:

    <div class="editor-label">
        @Html.LabelFor(model => model.PartId)
    </div>
    <div class="editor-field">
        <input type="text" id="parts" name="parts" />
    </div>

When I Create the object (save the form) the Parts field is not brought in as a part of the new object. How can I pair this field up with the other auto generated HTML Helpers so it saves correctly? Here's my controller for reference however I'm hoping this can be accomplished in the page itself:

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(Part part)
    {
        if (ModelState.IsValid)
        {
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(part);
    }

The Part class, which is a child object on the form. The user will key in the MatchCode into the form but the page needs to save the Part object:

public partial class Part
{
    public Part()
    {
        this.Counts1 = new HashSet<Count>();
    }

    public System.Guid Id { get; set; }
    public string PartNumber { get; set; }
    public string Matchcode { get; set; }
    public string Unit { get; set; }

    public virtual ICollection<Count> Counts1 { get; set; }
}

The Count class is the main Parent class:

public partial class Count
{
    public System.Guid Id { get; set; }
    public Nullable<System.Guid> LocationId { get; set; }
    public Nullable<System.Guid> PartId { get; set; }
    public Nullable<System.Guid> UnitId { get; set; }
    public string DocumentNumber { get; set; }   
    public virtual Location Location { get; set; }
    public virtual Part Part { get; set; }
    public virtual Unit Unit { get; set; }
}

thanks, so which property is your parts textbox meant to map to? — Rhumborl
– Rhumborl, Commented Nov 28, 2014 at 14:33
It's supposed to map to MatchCode. The user will key in MatchCode. — gleichdanke
– gleichdanke, Commented Nov 28, 2014 at 14:37
@dankeshawn You need to use "matchcode" as the input's name attribute, then (instead of "parts"). — Ant P
– Ant P, Commented Nov 28, 2014 at 14:37
@AntP Thanks, but Part is a child class on the page. How to store the child object from a parent class? — gleichdanke
– gleichdanke, Commented Nov 28, 2014 at 14:40

GSerg · Accepted Answer · 2014-11-28 14:53:35Z

3

This part:

But for one field I added a jQuery autocomplete and now the textbox has taken the form of a standard input field:

does not make sense.

Nothing stops you from using an HTML helper and then applying a jQuery autocomplete to that.

All you need is the id of the control, which you can provide yourself

@Html.TextBoxFor(model => model.PartId, new { id = "parts" })

so that you have a hard-coded id string to pass to jQuery, or the other way round, pass the id MVC selects to jQuery without knowing what it was:

<script>
    $("#@Html.IdFor(model => model.PartId)").autocomplete();
</script>

If you want to keep the EditorFor as opposed to TextBoxFor, you can do that too:

@Html.EditorFor(model => model.PartId, new { htmlAttributes = new { id = "parts" }})

but then you have to make sure your editing template actually renders a text field.

You can use the "standard input textbox" too:

<input type="text" id="@Html.IdFor(model => model.PartId)" name="@Html.NameFor(model => model.PartId)" />

edited Nov 28, 2014 at 14:53

answered Nov 28, 2014 at 14:47

GSerg

78.8k18 gold badges173 silver badges377 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gleichdanke Over a year ago

this helped me, thank you. I wasn't clear when I said that adding the autocomplete made the textbox a standard input field. I should have said the tutorial I followed used a standard input field and my question was how to revert back to the HtmlHelper without losing the autocomplete functionality (not knowing if it was possible). Thank you!

jonnarosey · Accepted Answer · 2018-08-02 06:51:00Z

1

The HtmlHelpers end up rendering normal HTML so there is no difference between the HTML rendered by 'standard input fields' and that rendered by the HtmlHelpers.

If you can make your code pass all the right arguments to the controller using the helpers then you should be able to 'view source' in your browser and copy that HTML into your view. If you do that then the values that end up passed to the controller should be the same, as long as the HTML the browser receives is the same in both circumstances then the calls to the controller should be the same.

edited Aug 2, 2018 at 6:51

answered Nov 28, 2014 at 14:40

jonnarosey

5601 gold badge8 silver badges20 bronze badges

1 Comment

Ant P Over a year ago

This doesn't provide a complete answer to the question, only "general guidance," which belongs in comments, not answers. Once you have reached 50 reputation you will be able to leave comments.

Artur Kedzior · Accepted Answer · 2014-11-28 15:00:24Z

0

Part is a child class on the page. How to store the child object from a parent class

So ...

@model Mvc.Models.YouParentModel

    <div class="editor-label">
        @Html.LabelFor(model => model.Part.PartId)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.Part.Matchcode, , new { id = "autocompleteField" })
    </div>

Then in your your javascript code you attach autocompleter to $("#autocompleteField")

For example:

<script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#autocompleteField" ).autocomplete({
      source: availableTags
    });
  });
  </script>

answered Nov 28, 2014 at 15:00

Artur Kedzior

4,2831 gold badge44 silver badges65 bronze badges

1 Comment

user3559349 Over a year ago

Or simpler @Html.TextBoxFor => m.Part.Matchcode) and $( "#Part_Matchcode" ).autocomplete({ ... (just use the ID generated by the helper)

Collectives™ on Stack Overflow

MVC4 - Using standard <input> textboxes alongside HTML Helpers

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related