CODEWITHSUNDEEP
c#asp.net-mvc-4
gleichdanke
gleichdanke

Reputation: 171

MVC4 - Using standard <input> textboxes alongside HTML Helpers

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; }
}

Upvotes: 0

Views: 149

Answers (3)

jonnarosey
jonnarosey

Reputation: 560

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.

Upvotes: 1

Artur Kedzior
Artur Kedzior

Reputation: 4263

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>

Upvotes: 0

GSerg
GSerg

Reputation: 78175

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)" />

Upvotes: 3

Related Questions