Load Partial View Inside the Modal - asp.net-mvc

Question

create partial view but it's not loaded inside the modal. I tried so many ways but still no luck to load partial view inside the modal. what I tried it is in down. I want to load another action method such as create method inside the modal window.
https://www.youtube.com/watch?v=3he9CLXmASo
Above link is example i want to do like this.
This is my modal code
<script>
$(document).ready(function() {
$("#showGame").click(function() {
var url = $("#gameModal").data("url");
$.get(url, function(data) {
$("#gameContainer").html(data);
$("#gameModal").modal("show");
});
});
});
<div class="modal fade" id="gameModal" data-url="#Url.Action("Create")">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Default Modal</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
This is my Partial view code
#model Mvc.Models.Company
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Company</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Address, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Address, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Address, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PhoneNumber, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.URL, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.URL, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.URL, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Email, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Active, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.Active)
#Html.ValidationMessageFor(model => model.Active, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Tstamp, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Tstamp, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Tstamp, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.IsDeleted, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.IsDeleted)
#Html.ValidationMessageFor(model => model.IsDeleted, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
This is my Controller Code
public ActionResult Create()
{
return View();
}
// POST: Companies/Create
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "CompanyID,Name,Address,PhoneNumber,URL,Email,Active,Tstamp,IsDeleted")] Company company)
{
if (ModelState.IsValid)
{
db.Companies.Add(company);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(company);
}

Answer 1

First write your modal related html code as follows:
// Button that will trigger the modal
<button id="createCompanyButton" type="button" class="btn btn-info">Create Company</button>
// Your modal code
<div class="modal fade" role="dialog" id="createCompanyFormModal" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Default Modal</h4>
</div>
<div id="createCompanyFormModalbody" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
Then in the JavaScript:
$(document).ready(function() {
$(document).on('click','#createCompanyButton', function(event) {
event.preventDefault();
event.stopImmediatePropagation();
$.ajax({
url: '/Companies/Create',
type: 'GET',
success: function(data) {
$('#createCompanyFormModalbody').html(data);
$('#createCompanyFormModal').modal('show');
},
error: function() {
alert("There is some problem in the service!")
}
});
});
});
Now it should show the form into modal when click the createCompanyButton button.