title: MVC 5 Edit Bootstrap Modal Popup
body: <p>I have the following View</p>
  
  <pre><code>@model QuotationManagement.Models.ProductViewModel
  
  @{
      ViewBag.Title = "Products";
  }
  
  &lt;h2&gt;Products&lt;/h2&gt;
  
  &lt;button id='newProduct' data-toggle="modal" data-target="#newProductModal" class="btn btn-primary"&gt;Add New Product&lt;/button&gt;
  &lt;br /&gt;
  @using (Html.BeginForm("Products", "Main", FormMethod.Post, new { encType = "multipart/form-data", name = "myform" }))
  {
      &lt;table class="table table-bordered table-condensed table-striped"&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  Name
              &lt;/th&gt;
              &lt;th&gt;
                  Price
              &lt;/th&gt;
              &lt;th&gt;
                  Gender
              &lt;/th&gt;
              &lt;td&gt;
                  Action
              &lt;/td&gt;
          &lt;/tr&gt;
          @Html.EditorFor(model =&gt; model.Products)
      &lt;/table&gt;
  }
  
  &lt;div id="newProductModal" class="modal fade"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              @using (Html.BeginForm("NewProduct", "Main", FormMethod.Post, new { encType = "multipart/form-data", name = "newProdutForm", @class = "form-group" }))
              {
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;New Product&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      @Html.HiddenFor(model =&gt; model.NewProduct.Id)
                      Name:
                      @Html.TextBoxFor(model =&gt; model.NewProduct.Name, new { @class = "form-control" })
                      Price:
                      @Html.TextBoxFor(model =&gt; model.NewProduct.Price, new { @class = "form-control" })
                      Gender:
                      @Html.DropDownListFor(model =&gt; model.NewProduct.ForGender, new List&lt;SelectListItem&gt;() { new SelectListItem() { Text = "Male", Value = "1" }, new SelectListItem() { Text = "Female", Value = "2" } }, new { @class = "form-control" })
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;button type="submit" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
                  &lt;/div&gt;
              }
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And then the Template</p>
  
  <pre><code>@model QuotationManagement.Bussiness_Logic_Layer.Product
  &lt;tr&gt;
      &lt;td&gt;
          @Html.HiddenFor(model =&gt; model.Id)
          @Html.DisplayFor(model =&gt; model.Name)
      &lt;/td&gt;
      &lt;td&gt;
          @Html.DisplayFor(model =&gt; model.Price)
      &lt;/td&gt;
      &lt;td&gt;
          @Html.DisplayFor(model =&gt; model.Gender)
      &lt;/td&gt;
      &lt;td&gt;
          @Html.ActionLink("Edit", "EditProduct","Main", Model ,new { @class = "btn btn-primary"})
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Adding a new Product works, but now I want to change the edit Button to Bind the row item to the Boostrap Popup and then opens it for editing.</p>
  
  <p>The current method I am trying is with the ActionLink which then takes the selected Product and binds it to ProductViewModel.NewProduct, which works but now my problem is I will need to reload the whole page and repopulate the table and then somehow open the Boostrap Modal.</p>
  
  <p>So my question is
  How can I Bind the Selected Product to the Modal and then show the Modal withoud having to do a postback or without having to reload the current page</p>