title: Data binding in MVC 5 and Select2 Multiple Values with Razor engine
body: <p>Usually I do very little work on html side of the application because for the most part I just let that get generated for me.</p>
  
  <p>I am working on an app for a blog with Posts Tags and Comments. What I want to do is when creating a new post, I should be able to add existing tags to the new post. I am trying to use Select2 but I can't figure out how to make the selected values passed to my Create method in the post controller so that they can be stored in the database.</p>
  
  <p>Here is what I am working with:</p>
  
  <pre><code>namespace Blog.Data.Entities
  {
      public class Post
      {
          public virtual long PostId { get; set; }
  
          -------------------
  
          public virtual ICollection&lt;Tag&gt; Tags { get; set; }
      }
  
      public class Tag
      {
          public virtual long TagId { get; set; }
          public virtual string Name { get; set; }
          public virtual string Description { get; set; }
      }
  }
  </code></pre>
  
  <p>Post Controller</p>
  
  <pre><code>// POST: /Post/Create
      [HttpPost]
      public ActionResult Create(PostsCreateViewModel postModel)
      {
          if (ModelState.IsValid)
          {
              Post post = new Post
              {
                  Title = postModel.Title,
                  Body = postModel.Body,
                  PostDate = _dateTime.UtcNow
              };
  
              foreach (var tag in postModel.Tags)
              {
                  post.Tags.Add(_tagRepository.GetTag(tag.TagId));
              }
  
              _postRepository.SavePost(post);
  
              return RedirectToAction("Detail");
          }
          return View(postModel);
      }
  </code></pre>
  
  <p>I am successfully able to load data from remote with: <strong><em>Json code left out</em></strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $("#tags").select2(
          {
              placeholder: "Select a Tag",
              minimumInputLength: 1,
              multiple: true,
              maximumSelectionSize: 5,
              ajax: {
                  url: '@Url.Action("SearchTag", "Post")',
                  dataType: 'json',
                  data: function (term, page) {
                      return {
                          searchTerm: term,
                          page_limit: 10,
                          page: page,
                      };
                  },
                  results: function (data, page) {
                      var more = (page * 10) &lt; data.total;
                      return { results: data, more: more };
                  }
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>View: usually I would have something like</p>
  
  <pre><code>&lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.Title, new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.Title)
                  @Html.ValidationMessageFor(model =&gt; model.Title)
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>How can I write similar html for my tag textbox, so that when I click save everything is saved to appropriate tables?</strong></p>
  
  <p>Currently I just have this for select2:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      @Html.LabelFor(model =&gt; model.Tags, new { @class = "control-label col-md-2" })
      &lt;div class="col-md-10"&gt;
          &lt;input id="tags" style="width: 300px" /&gt;
          @Html.ValidationMessageFor(model =&gt; model.Tags)
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Which produces;</p>
  
  <p><img src="https://i.stack.imgur.com/8QfHY.png" alt="enter image description here"></p>