I am passing a list to a view to display in a grid. Underneath the grid I have a form to allow the user to submit new values into the grid. When the controller is called the model always seems to be empty, I am not sure what I am doing wrong or if I should be doing this in a different way entirely.
The relavent parts of the view are as follows
#model IList<PSIApp.Models.PSM_StationTimetableView>
#using (Html.BeginForm())
{
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse3">Hourly Update ▼</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse in" style="width:100%; margin-left:0%; margin-right:50px;">
<div class="mainformCollapse" style="width:100%; margin-left:0%; margin-right:50px;">
<p class="group-header">Hourly Update</p>
<div class="form-group row">
<label for="example-text-input" class="col-xs-3 col-form-label" id="formLabelId">BP Issued</label>
<div class="col-xs-3">
#Html.MyTextBoxFor(p => p[0].PSM_StationBPData.BPIssued, new { #class = "generalformbox" }, false)
</div>
<label for="example-text-input" class="col-xs-3 col-form-label " id="formLabelId">BP Cancelled/Spoilt</label>
<div class="col-xs-3">
#Html.TextBoxFor(p => p[0].PSM_StationBPData.BPSpoilt, new { #class = "generalformbox" })
</div>
</div>
<div class="form-group row">
<label for="example-text-input" class="col-xs-3 col-form-label" id="formLabelId">AV Issued</label>
<div class="col-xs-3">
#Html.TextBoxFor(p => p[0].PSM_StationBPData.PostalReceived, new { #class = "generalformbox" })
</div>
<label for="example-text-input" class="col-xs-3 col-form-label" id="formLabelId">Tendered Issued</label>
<div class="col-xs-3">
#Html.TextBoxFor(p => p[0].PSM_StationBPData.BPTendered, new { #class = "generalformbox" })
</div>
</div>
<input type="submit" value="Submit Hourly Update" class="standardsubmitbt" />
</div>
</div>
</div>
</div>
}
Controller
public ActionResult POControl(Models.PSM_StationBPData model)
{
return RedirectToAction("POControl");
}
You are sending an IList of PSM_StationTimetableView, but you are expecting a PSM_StationBPData on the controller.
Related
I am trying to create a Bootstrap modal pop up "Ticket successfully created" once you submit a form which posts data through to IActionResult to add to database. However my modal is like transparent with just text and I'm also getting a runtime error of : Obj ref not set to an instance of object
I have a feeling that modal popup is causing the passing of data back to the controller to not work. What is the way around this?
GetTicket view
#model Project.HelpDeskViewModel
<fieldset>
#using (Html.BeginForm())
{
<div class="container">
<div class="form-group">
<div class="row m-4 text-center">
<div class="col-4">
</div>
<div class="col-4">
<h2 style="text-align:center;font-weight:bold">Get A Ticket</h2>
</div>
</div>
</div>
<div class="form-group">
<div class="row m-3">
<div class="col-4" style="text-align:left">
#Html.LabelFor(m => m.category)
</div>
<div class="col-4">
#Html.DropDownListFor(m => m.category, new SelectList(Model.categoryList, "Value", "Text"), "Select category", new { #class = "form-control" })#Html.ValidationMessageFor(model => model.category,
"", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
<div class="row m-3">
<div class="col-4" style="text-align:left">
#Html.LabelFor(m => m.ticketDescription)
</div>
<div class="col-4">
#Html.TextAreaFor(m => m.ticketDescription, new { #class = "form-control" })#Html.ValidationMessageFor(model => model.ticketDescription,
"", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#*Modal for ticket creation*#
<div class="modal" id="MyModal" role="dialog">
<div class="modal-dialog">
<div class="model-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4>Ticket Created</h4>
</div>
<div class="modal-body">
<p> Your Helpdesk ticket has been succesfully submitted</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal"> close</button>
</div>
</div>
</div>
</div>
</div>
<div class="row m-3">
<div class="col-4">
</div>
<div class="col-4" style="text-align:left">
<button type="submit" class="btn btn-primary form-control" data-target="#MyModal" data-toggle="modal">Submit</button>
</div>
</div>
</div>
}
</fieldset>
Controller
[HttpPost]
public IActionResult GetTicket(HelpDeskViewModel h)
{
HelpDeskViewModel sess = new HelpDeskViewModel();
try
{
//session variable passing userID
sess.userID = HttpContext.Session.GetString("userID");
if (!ModelState.IsValid) return View(h);
//h.empID = null; //add ticket record without employeeID - ticket hasn't been assigned yet
h.userID = sess.userID; //add userID from session
_db.helpdesk.Add(h);
_db.SaveChanges();
}
catch (Exception ex)
{
global.gLogger.log.Debug("Debug message: ", ex.Message);
global.gLogger.log.Error(new Exception(), ex.Message);
global.gLogger.log.Error(new Exception(), ex.StackTrace);
global.gLogger.log.Fatal("Fatal message: ", ex.Message); ;
}
return View("GetTicket");
}
You can use ViewBag for open bootstrap modal after successfully return from server to client
Client Side View
#if(ViewBag.SuccessfullyTicketCreated != null)
{
<script>
$('#myModal').modal('show'); // open model by use jQuery
</script>
}
Server side Controller
_db.SaveChanges();
ViewBag.SuccessfullyTicketCreated = true; // create ViewBag after savechange success
I hope help you simple way
Only use of ajax call can solve your problem without creating any further issues. if you are not using jQuery, you can also send ajax call using Javascript using fetch() method.
<form id="form" action="/Controller/GetTicket" method="post">
<div class="container">
<div class="form-group">
<div class="row m-4 text-center">
<div class="col-4">
</div>
<div class="col-4">
<h2 style="text-align:center;font-weight:bold">Get A Ticket</h2>
</div>
</div>
</div>
<div class="form-group">
<div class="row m-3">
<div class="col-4" style="text-align:left">
#Html.LabelFor(m => m.category)
</div>
<div class="col-4">
#Html.DropDownListFor(m => m.category, new SelectList(Model.categoryList, "Value", "Text"), "Select category", new { #class = "form-control" })#Html.ValidationMessageFor(model => model.category,
"", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
<div class="row m-3">
<div class="col-4" style="text-align:left">
#Html.LabelFor(m => m.ticketDescription)
</div>
<div class="col-4">
#Html.TextAreaFor(m => m.ticketDescription, new { #class = "form-control" })#Html.ValidationMessageFor(model => model.ticketDescription,
"", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#*Modal for ticket creation*#
<div class="modal" id="MyModal" role="dialog">
<div class="modal-dialog">
<div class="model-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4>Ticket Created</h4>
</div>
<div class="modal-body">
<p> Your Helpdesk ticket has been succesfully submitted</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal"> close</button>
</div>
</div>
</div>
</div>
</div>
<div class="row m-3">
<div class="col-4">
</div>
<div class="col-4" style="text-align:left">
<button type="submit" class="btn btn-primary form-control" data-target="#MyModal" data-toggle="modal">Submit</button>
</div>
</div>
</div>
</form>
Use Javascript:
<script> function onSubmit(){
$.ajax({
url:'/Controller/GetTicket',
type:'post',
data: $('#form').serialize(),
success: function(){
// code here;}
})
}</script>
I am struggling to make a new line, i have checkbox each must have its own new line. Any idea how to achieve this using bootstrap class within a form-group row?
<div class="form-group row">
<label for="Dietary requirement" class="col-sm-2 col-form-label">Dietary requirements</label>
<div class="col-sm-2">
#Html.CheckBoxFor(model => model.DietMain.None)<label for="None">None</label>
<hr />
</div>
<div class="form-group row">
#Html.CheckBoxFor(model => model.DietMain.Vegetarian)<label for="Vegetarian">Vegetarian</label>
</div>
</div>
Change the col-sm-2 to col-sm-12 and remove all then add new { #class="col-md-12" } htmlAttributes to #Html.CheckBoxFor(model => model.DietMain.Vegetarian)
<div class="form-group row">
<label for="Dietary requirement" class="col-sm-12 col-form-label">Dietary requirements</label>
<div class="col-sm-12">
#Html.CheckBoxFor(model => model.DietMain.None)<label for="None">None</label>
<hr />
</div>
<div class="form-group row">
#Html.CheckBoxFor(model => model.DietMain.Vegetarian, new { #class="col-md-12" })
<label for="Vegetarian">Vegetarian</label>
</div>
</div>
My View page, it contains many dynamic controls
I know this question has been asked and answered a dozen of times but none of the solutions help me.
I have a following ViewModel which is consisted of QuestionBatch data model,listResponseTag and a list of listQuestion data model.
View Model
public class VM_Questionaire
{
public QuestionBatch ThequestionBatch { get; set; }
public List<Question> listQuestion { get; set; }
public List<ResponseTag> listResponseTag { get; set; }
}
Controller
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult submit_Questionaire(VM_Questionaire vm_question)
{
if (ModelState.IsValid)
{
Console.Write(Newtonsoft.Json.JsonConvert.SerializeObject(vm_question));
}
return View("Index");
}
View
<pre>
#model Fonz_Survey.Models.VM_Questionaire
#{
ViewBag.Title = "Questionaire";
}
#using (Html.BeginForm("submit_Questionaire", "Questions", FormMethod.Post))
{
#Html.AntiForgeryToken()
<h2>Questionaire</h2>
<div class="card">
<div class="card-header">
<div class="jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<h5 class="text-muted text-monospace">CODE</h5>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 text-danger text-monospace">
#Html.DisplayFor(model => model.ThequestionBatch.Code, new { #class = "text-danger text-monospace" })
#Html.HiddenFor(model => model.ThequestionBatch.Code)
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<h5 class="text-muted text-monospace">Question Batch</h5>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 text-primary text-monospace">
#Html.DisplayFor(model => model.ThequestionBatch.BatchName, new { #class = "text-primary text-monospace" })
#Html.HiddenFor(model => model.ThequestionBatch.BatchName)
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<h5 class="text-muted text-monospace">No of Questions</h5>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<label class="text-primary text-monospace">#ViewBag.totalQstns</label>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<h5 class="text-muted text-monospace">Description</h5>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 text-primary text-monospace text-wrap">
#Html.DisplayFor(model => model.ThequestionBatch.Description, new { #class = "text-primary text-monospace text-wrap" })
#Html.HiddenFor(model => model.ThequestionBatch.Description)
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
#{
//int rowIndex = 0;
}
#if (Model != null && Model.listQuestion != null)
{
for(var rowIndex=0; rowIndex< Model.listQuestion.Count; rowIndex++)
//foreach (Question question in Model.listQuestion)
{
// rowIndex++;
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header bg-gray text-light">
<div class="d-inline-block">
<label class="text-lg-left font-weight-bold">#rowIndex.</label>
<label class="text-lg-left font-weight-bold">#Model.listQuestion[rowIndex].QuestionEN</label>
<br />
<label class="text-lg-left font-weight-bold">#Model.listQuestion[rowIndex].QuestionAR</label>
</div>
</div>
<div class="card-body font-weight-bolder">
#switch (#Model.listQuestion[rowIndex].QType)
{
case 1:
// to do Text Boxes
<p class="text-info"><u>Please enter your message below;</u></p>
<div class="form-row">
#*<input type="text" placeholder="#question.QuestionEN" name="Q_#question.Id" id="Q_#question.Id" class="form-control" />*#
#Html.EditorFor(model=> #Model.listQuestion[rowIndex].QuestionEN)
</div>
break;
case 2:
// to do Radio
<p class="text-info"><u>Please select any one of the option below;</u></p>
foreach (ChoiceTag ct in Model.listQuestion[rowIndex].ChoiceTags)
{
<div class="form-check">
<label class="form-check-label" for="C_#ct.Id">
<input type="radio" class="form-check-input" id="C_#ct.Id" name="#Model.listQuestion[rowIndex].Id" value="#ct.AnswerEN">#ct.AnswerEN | #ct.AnswerAR
</label>
</div>
}
break;
case 3:
// to do Radio
<p class="text-info"><u>Please select options below;</u></p>
foreach (ChoiceTag ct in Model.listQuestion[rowIndex].ChoiceTags)
{
<div class="form-check">
<label class="form-check-label" for="C_#ct.Id">
<input type="checkbox" class="form-check-input" id="C_#ct.Id" name="#Model.listQuestion[rowIndex].Id" value="#ct.AnswerEN">#ct.AnswerEN | #ct.AnswerAR
</label>
</div>
}
break;
}
</div>
</div>
</div>
</div>
}
<div class="form-group">
<div class="col-12 text-center">
<input type="submit" value="Submit" class="btn btn-success " />
</div>
</div>
}
</div>
<div class="card-footer">
<label class="text-danger">#ViewBag.Message</label>
</div>
</div>
}
</prev>
First object getting value, but the list getting null.
#Html.DisplayFor() will not post values. You need to use #Html.HiddenFor() along with #Html.DisplayFor(). Refer: Html.DisplayFor not posting values to controller in ASP.NET MVC 3
if you're not passing any type of data then make your data as a hidden field and after that you will received your data at your respective controller.
Thanks.
When returning a partial view to the browser, on the first load the partial view renders as I'v laid it out with no issues but when I hit my submit button and call an ajax request, it returns inside itself.
For example - on first run it renders:
<div id="search" class="col-md-4">
...
</div>
But after the postback it renders as
<div id="search" class="col-md-4">
<div id="search" class="col-md-4">
...
</div>
</div>
My View with the Partial View render is:
#model SpecCheck.Portals.Web.UI.ViewModels.Search
#{
ViewBag.Title = "Search";
}
#Html.Action("_GetSearch", "Home");
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-gears"></i> Discontinued Machines</h3>
</div>
<div class="panel-body">
<select class="form-control">
<option>All Tiers</option>
<option>Tier 2 / Tier 3</option>
<option>Interim Tier 4 / Tier 4</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<i class="fa fa-folder-open"></i> Search by Category
</h3>
</div>
<div class="panel-body">
<select class="form-control">
<option>Select a product category</option>
<option>Construction</option>
<option>Technologies</option>
</select>
</div>
</div>
</div>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-star"></i> Latest Model Data</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
And my partial View:
#model IEnumerable<SpecCheck.Portals.Web.UI.ViewModels.Search>
<div id="modelSearch" class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-search"></i> Search by Model / Manufacturer</h3>
</div>
<div class="panel-body">
#using (Ajax.BeginForm("_GetSearch", "Home", new AjaxOptions() { UpdateTargetId = "modelSearch" }))
{
#Html.AntiForgeryToken()
<div class="input-group">
#Html.TextBox("search", null, new {id = "name", #class = "form-control", placeholder = "Please enter a manufacturer or model"})
<span class="input-group-btn">
<button id="search" class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
</span>
</div>
if (Model != null)
{
<div id="searchResults" class="fade">
#foreach (var s in Model)
{
<div class="result">
#switch (s.ResultType)
{
case "Man":
#s.Manufacturer
break;
case "Mod":
#s.Manufacturer #s.Model
<img src="~/Images/General/(#s.TierId).png" alt="Tier #s.TierId"/>
break;
}
</div>
}
</div>
}
}
</div>
</div>
</div>
And my Ajax call:
public PartialViewResult _GetSearch(List<Search> model, string search)
{
if (search != null)
{
var results = SearchModels(search).ToList();
model = results;
}
return PartialView("_Search", model);
}
Any idea why this might be happening?
Create a id before the partial view call.
And after the ajax call and append the partial view to that div. Like below
Don't forgot to empty the div before you append.
<div id="yourdivid">
#Html.Action("_GetSearch", "Home");
</div>
I have this model, Customer . When i get the information with an id, it works just fine.
Like ;
/Customer/Entity/5
#model ProgSpace.Models.Customer
#{
ViewBag.Title = Model.Name;
Layout = "~/Views/Shared/_MainLayout.cshtml";
}
#section bodypane
{
#using (Html.BeginForm("Entity", "Customer", FormMethod.Post, new { #enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
<div class="col-md-12">
<div class="col-md-1">
<label>Customer No:</label>
<h4># #(Model.ID) </h4>
</div>
<div class="clearfix"></div><br />
<div class="col-md-2">
<div class="col-md-12">
<div class="col-md-12 fileupload fileupload-exists" data-provides="fileupload">
<div class="fileupload-preview fileupload-exists thumbnail" style="width: 200px; height: 150px;">
<img src="#Model.Picture.Path" />
</div>
<div>
<span class="btn btn-default btn-file">
<span class="fileupload-new">Add Pic </span>
<span class="fileupload-exists">Change</span><input name="file" id="file" type="file">
</span>
Remove
</div>
</div>
</div>
</div>
<div class="col-md-10">
<div class="col-md-3">
<label>Name *</label>
#Html.TextBoxFor(model => model.Name, new { #class = "form-control"})
</div>
<div class="col-md-3">
<label>Company</label>
#Html.TextBoxFor(model => model.Contact.Company, new { #class = "form-control"})
</div>
<div class="col-md-3">
<label>Phone </label>
#Html.TextBoxFor(model => model.Contact.Phone, new { #class = "form-control" })
</div>
</div>
<div class="clearfix"><br /></div>
<p> </p>
<div class="col-md-12">
<div class="btn-group">
<button class="btn btn-danger btn-lg">Cancel</button>
<button type="submit" class="btn btn-success btn-lg">Send</button>
</div>
</div>
</div>
}
}
And in the controller i have these actions.
public ActionResult Entity(int id)
{
Customer cust= sis.Customers.Where(t => t.ID == id).FirstOrDefault();
return View(cust);
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Entity(Customer cust, HttpPostedFileBase file)
{
if (ModelState.IsValid)
{
/* Do something */
}
else
{
}
return View(cust);
}
When the verb is GET , it's fine. But when i post this form and when the second action (HttpPost action) kicks in , view throws an error..
Object reference not set to an instance of an object
which marks the Model.ID is null in the view.
<div class="col-md-1">
<label>Customer No:</label>
<h4># #(Model.ID) </h4> ---> THIS HERE THROWS NULL EXCEPTION
</div>
I've tried to add a HiddenFor for the Model.ID like
#Html.HiddenFor(t => t.ID)
but it didn't change anything.
How do i get back to the same view with the same context again ?