I'm developing an MVC webpage, where I'm intending to do Create and Edit operations via a pop-up. So, the idea is I click on the 'Create' button, a modal-popup appears with all the model fields empty and allows user to input. In the same way, when user double clicks on any row, the row would open up for edit via the same pop-up, this time with the details filled from that row.
So, for reusage, I have decided to develop a single partial view(that would be the pop-up) and accept 'Model' as input.
My problem is, no matter what I do, I'm not able to make the partial view come up as pop-up. (Note: my main parent Index view would accpet input as List
Here is my code:
MY Index view:
@model List<TrackBuildConfig.DAL.Models.BuildModel>
@{
Layout = null;
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/MyScript.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="jumbotron">
<h1>Track Coverity and Nightly builds</h1>
<h4>on your own!</h4>
</div>
<div class="container-fluid">
<div class="row btn-group">
@Html.ActionLink("Create a new record", "SaveData", "Home", new { configID = 0 }, new { @class = "btn btn-primary modal-link", id = "btnCreate"})
</div>
<div class="modal fade" aria-labelledby="ModalLabel" id="modal-container" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content" style="width: 500px !important; margin:10px !important">
</div>
</div>
</div>
</div>
</body>
</html>
Script:
$(function () {
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$('#btnCreate').attr('data-toggle', 'modal');
$('#btnCreate').attr('data-target', '#modal-container');
$('#modal-container').modal('show');
return true;
});
}
});
Partial view _PartialModal.csHtml
@model TrackBuildConfig.DAL.Models.BuildModel
@{
Layout = null;
}
<html>
<head>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/MyScript.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
<h4>Configure Coverity and Nightly builds</h4>
</div>
<div class="modal-body" style="height: 400px;">
@using (Html.BeginForm("SaveData", "Home", FormMethod.Post))
{
<div class="row">
<div class="form-group row">
<div class="col-sm-4">
@Html.Label("Stream name", new { @class = "control-label" })
</div>
<div class="col-sm-6">
@Html.DropDownList("BuildLocations", (IEnumerable<SelectListItem>)ViewBag.BuildLocations, new { @class = "col-sm-6 form-control", id = "ddlBuildLocation" })
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
@Html.Label("Build Location", new { @class = "control-label" })
</div>
<div class="col-sm-6">
@Html.DropDownList("Streams", (IEnumerable<SelectListItem>)ViewBag.Streams, new { @class = "col-sm-6 form-control", id = "ddlStreams" })
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
<div class="checkbox">
<label>
@Html.CheckBoxFor(m => m.IsCoverity)
Enable Coverity
</label>
</div>
</div>
<div class="col-sm-8">
<div class="checkbox">
<label>
@Html.CheckBoxFor(m => m.IsNightly)
Enable Nightly build
</label>
</div>
</div>
<label style="color: red; font-weight: 300;" id="warningEnableBuild"></label>
</div>
<div class="form-group row">
@Html.Label("Email for Coverity", new { @class = "col-sm-4 control-label" })
<div class="col-sm-8" style="width: 100%">
@Html.TextAreaFor(m => m.EmailCoverity, new { @class = "form-control clsEmailCoverity", @placeholder = "Enter some value", @onkeyup = "return true;", @rows = "5", id = "txtEmailCoverity" })
@*<textarea id="txtEmailCoverity" class="form-control clsEmailCoverity" runat="server" rows="5" placeholder="Enter email IDs for Coverity builds" onkeyup="SetEmailForNightly()"></textarea>*@
<span class="help-block">Please add only comma separated addresses!</span>
<label style="color: red; font-weight: 300;" id="warningLabelCoverity"></label>
</div>
</div>
<div class="form-group row">
@Html.Label("Email for Nightly", new { @class = "col-sm-4 control-label" })
<div class="col-sm-8" style="width: 100%">
@Html.TextAreaFor(m => m.EmailNightly, new { @class = "form-control clsEmailNightly", @placeholder = "Enter some value", @onkeyup = "return true;", @rows = "5", id = "txtEmailNightly" })
@*<textarea id="txtEmailCoverity" class="form-control clsEmailCoverity" runat="server" rows="5" placeholder="Enter email IDs for Coverity builds" onkeyup="SetEmailForNightly()"></textarea>*@
<span class="help-block">Please add only comma separated addresses!</span>
<label style="color: red; font-weight: 300;" id="warningLabelNightly"></label>
</div>
</div>
<div class="modal-footer">
<button id="btnSave" class="btn btn-success" type="submit" role="button">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
}
</div>
</div>
</body>
</html>
Controller methods:
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
GetData getdata = new GetData();
return View(getdata.GetDataFromTable());
}
[HttpPost]
public ActionResult SaveData()
{
return View("Index");
}
//[HttpGet]
public ActionResult SaveData(int configID)
{
BuildModel model = new BuildModel();
PopulateBuildLocations();
PopulateStreams();
//Create
if (configID != 0)
{
GetData getdata = new GetData();
model = getdata.GetDataFromTable().Where(co => co.ConfigID == configID).FirstOrDefault();
}
else
{
model.BuildLocation = "";
model.EmailCoverity = "";
model.EmailNightly = "";
model.IsCoverity = false;
model.IsNightly = false;
}
return PartialView("_PartialModal", model);
}
public void PopulateBuildLocations()
{
string reportTypes = ConfigurationManager.AppSettings["ddlStreams"].ToString();
ViewBag.BuildLocations = reportTypes.Split('|')
.Select((text, value) => new SelectListItem { Text = text, Value = value.ToString() });
}
public void PopulateStreams()
{
List<string> lstStreams = new List<string>();
for (int i = 0; i < 6; i++)
{
lstStreams.Add("Stream " + i);
}
ViewBag.Streams = lstStreams.Select((text, value) => new SelectListItem { Text = text, Value = value.ToString() });
}
}
This is the link I used as reference. Reference
