I can add a create partial view within a modal bootstrap so that it can add value in the table with a edit view of the field value ?
My create partial view
#model MVCLayout.Models.Table2
<p>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="form-group">
#Html.Label("Cargo: ", new { style = "width:160px" })
#Html.TextBoxFor(model => model.ID, new { style = "width:200px" })
</div>
<br/>
<div class="form-group">
#Html.Label("Percentual: ", new { style = "width:160px" })
#Html.TextBoxFor(model => model.Name, new { style = "width:200px" })
</div>
<br/>
<div class="form-group">
#Html.Label("Serviço: ", new { style = "width:160px" })
#Html.TextBoxFor(model => model.Work, new { style = "width:200px" })
</div>
<br/>
<p>
<input type="submit" value="Save" />
</p>
}
</p>
My Edit View
<html>
<body>
#model MVCLayout.Models.Table1
#{
ViewBag.Title = "Edit";
}
<div id="signup">
<div class="rontainer">
<div class="header">
<div id="dock">
<br>
#using (Html.BeginForm("Edit", "AdmServicos", FormMethod.Post, new { #class = "form-inline" }))
{
#Html.AntiForgeryToken()
<fieldset>
<legend>Editar Servios</legend>
<br>
<div class="form-group">
#Html.Label("Código:", new { style = "width:160px" })
#Html.TextBoxFor(model => model.ID, new { style = "width:55px", #readonly = "readonly" })
<div class="form-group">
#Html.Label("Descrição: ", new { style = "width:160px" })
#Html.TextBoxFor(model => model.Descricao, new { style = "width:550px", #readonly = "readonly" })
</div>
</div>
<br />
<br /><br />
<p>
<input type="submit" value="Salvar" />
</p>
</fieldset>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
#{
Html.RenderPartial("CreateTable2", Model.ID);
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
</body>
</html>
Can I do this with a partial view or the best way to do this?
create a property of Table2 type in your Table1 Model like below :
public class Table1
{
public Table2 table2 {get; set;}
//other properties of Table1 Model
}
Now in your Edit View:
<div class="modal-body">
#{
Html.RenderPartial("CreateTable2", Model.table2);
}
</div>
Now in your Action of the Controller :
public ActionResult Edit(Table1 model)
{
var editPartialViewData = model.table2;
// Do whatever you want to do with this data
}
Related
I can't seem to get the values I entered from the form into my action createEmployee method in the controller I think the issue is the ViewModel I may be wrong but how do I fix this. The only thing I able to recieve back when I run the project the random number I generated, and null variables, also how do I add the inputted Employee back to list side note my Employee list is hard coded
View.cs
#using (Html.BeginForm("CreateEmployee", "/Employee", FormMethod.Post))
{
<div class="row">
<div class="col-lg-2">First Name</div>
<div class="col-lg-10">
#Html.TextBoxFor(m => m.Employee.Name, new { #class = "form-control" })
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2">Last Name</div>
<div class="col-lg-10">
#Html.TextBoxFor(m => m.Employee.Surname, new { #class = "form-control" })
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2">Date of Birth</div>
<div class="col-lg-10">
#Html.TextBoxFor(m => m.Employee.DateOfBirth, new { #class = "form-control" })
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2">Department</div>
<div class="col-lg-10">
#Html.TextBoxFor(m => m.Employee.Department, new { #class = "form-control" })
</div>
</div>
<br />
<div class="modal-footer">
<button type="submit" class="btn btn-primary center-block">Complete</button>
</div>
}
EmployeeViewModel
public List<Fundi.HR.Web.Models.Employee> Employees { get; set; }
public Employee Employee { get; set; }
public EmployeeViewModel(List<Employee> found)
{
this.Employees = found;
}
Action EmployeeController
public ActionResult CreateEmployee(Employee emp)
{
if (ModelState.IsValid)
{
Random random = new Random();
int num = random.Next();
Employee empObj = new Employee();
List<Employee> employees = new List<Employee>();
empObj.EmployeeId = num;
empObj.Name = emp.Name;
empObj.Surname = emp.Surname;
empObj.DateOfBirth = emp.DateOfBirth;
empObj.Department = emp.Department;
employees.Add(empObj);
EmployeeViewModel em = new EmployeeViewModel(employees);
return View("Index", em);
}
else
{
return RedirectToAction("Index");
}
For a simple test, I used part of your code so that the value can be accepted, you can refer to the following:
View:
#model WebApplication38.Models.Employee
#{
ViewBag.Title = "Index";
}
#using (Html.BeginForm("CreateEmployee", "Test", FormMethod.Post))
{
<div class="row">
<div class="col-lg-2">First Name</div>
<div class="col-lg-10">
#Html.TextBoxFor(m=>m.name, new { #class = "form-control" })
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2">Last Name</div>
<div class="col-lg-10">
#Html.TextBoxFor(m => m.Surname, new { #class = "form-control" })
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2">Date of Birth</div>
<div class="col-lg-10">
#Html.TextBoxFor(m => m.DateOfBirth, new { #class = "form-control" })
</div>
</div>
<br />
<div class="row">
<div class="col-lg-2">Department</div>
<div class="col-lg-10">
#Html.TextBoxFor(m => m.Department, new { #class = "form-control" })
</div>
</div>
<br />
<div class="modal-footer">
<button type="submit" class="btn btn-primary center-block">Complete</button>
</div>
}
Controller and result:
Im trying to load a MVC partial view in to a modal popup. The popup contains a drop down list which I am trying to populate on the ActionResult that loads when the view is loaded. The problem is the controller code isn't getting ran.
My code is as follows -
View:
<div id="modal_form_horizontal_addnote" class="modal fade">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title">Add Note</h5>
</div>
#Html.Partial("AddNote", new IHD.Core.Models.CreateTicketNoteModel { TicketHeaderId = Model.Id })
</div>
</div>
The partial view:
#model IHD.Core.Models.CreateTicketNoteModel
#using (Html.BeginForm("AddNote", "Ticket", FormMethod.Post))
{
#Html.HiddenFor(model => model.TicketHeaderId)
#Html.AntiForgeryToken()
<div class="row">
<div class="col-md-12">
<div class="tab-content">
<div class="tab-pane active" id="highlighted-justified-tab1">
<div class="form-group">
#Html.LabelFor(model => model.WorkType, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-12">
#Html.DropDownListFor(model => model.WorkType, new SelectList(Model.WorkTypeOptions, "Key", "Value", Model.WorkType), new { #name = "select", #class = "form-control" })
#Html.ValidationMessageFor(model => model.WorkType, "", 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>
</div>
}
The controller:
public ActionResult AddNotePhase(int id = 0, int taskId = 0)
{
CreateTicketPhaseNoteModel note = new CreateTicketPhaseNoteModel();
note.TicketHeaderId = id;
// Populate the work type dropdown list
note.WorkTypeOptions.Add("", "-- Select a Work Type --");
note.WorkTypes = _workTypeService.GetAll().ToList();
foreach (var c in note.WorkTypes)
{
note.WorkTypeOptions.Add(c.Id.ToString(), c.Description);
}
//note.PhaseTask = taskId;
return PartialView(note);
}
You controller code isn't being hit because you are passing a model to the partial view and not calling the action. You need to use #{Html.RenderAction();} instead to call your action with the appropriate values.
I'm trying to submit a form from a modal generated in a partial view. And I don't know how to get back the submitted form.
Here is the view:
#model Myproject.ViewModels.GetMonitorFromDeviceViewModel
#{
ViewBag.Title = "GetMonitorFromDevice";
Layout = "~/Views/Shared/ManagementPage.cshtml";
}
<div id="Accordion">
#{
foreach (var type in Model.AvailableTypesAvailableMonitors)
{
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" data-parent="#accordion" href="##type">
#type
</a>
</div>
<div id="#type" class="collapse show">
<div class="card-body">
#{
foreach (var monitor in Model.ActiveMonitors)
{
if (monitor.Type == #type)
{
<p>
#monitor.Name
<span class="btn btn-xs btn-primary btnEdit" onclick="createModal('#Url.Action("NameMonitor", "DeviceManager" , new { idDevice = monitor.DeviceOwner.ID, monitorName = monitor.Name })')">Details</span>
</p>
}
}
}
</div>
</div>
</div>
}
}
</div>
And here is my modal at the bottom of the page:
<div class="modal fade" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content" id="modelContent">
</div>
</div>
</div>
<script>
function createModal(url) {
$('#modelContent').load(url);
$('#myModal').modal('show');
}
</script>
And finally, here is my partial view that is displayed as a modal:
#model MyProject.ViewModels.NameMonitorModal
#using (Html.BeginForm("NameMonitor", "DeviceManager", FormMethod.Post))
{
<div class="modal-body">
<div class="form-group">
#Html.LabelFor(model => model.NewName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NewName, new { htmlAttributes = new { #class = "form-control", #Value = Model.TrueName } })
#Html.ValidationMessageFor(model => model.NewName, "", new { #class = "text-danger" })
</div>
</div>
#Html.HiddenFor(model => model.TrueName)
#Html.HiddenFor(model => model.IdDevice)
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save name" class="btn btn-default" data-dismiss="modal" />
</div>
</div>
</div>
}
In my controller, I have an action for my partial view called ActionResult NameMonitor.
In order to catch the submited form, I tried to add another action with the [HttpPost] tag with the same name but doesn't work. I also tried to use the main page action with the [HttpPost] tag but it doesn't work either. As you can see, I have specified the action and controller in the form itself but its still not working.
Now, I'm a little bit out of idea of how I can get the information from my modal back.
data-dismiss="modal" will close the modal without submitting the form, see Dismiss and submit form Bootstrap 3
You can change the submit button to call a JavaScript function to submit the form, then close the modal.
function submitModal() {
$('#myFormId').submit();
$('#myModal').modal('hide');
}
#Html.ActionLink("edit", "Edit", "MedQuantityType", new { id = item.Med_quan_typeId }, new
{
#* Needed to link to the html of the modal*#
data_target = "#mymodel",
#* Tells the bootstrap javascript to do its thing*#
data_toggle = "modal",
})
This the action link I try to popup partial view in bootstrap model, it's working fine when I try to edit & save it works except model state is not valid
here my controller code
public async Task<ActionResult > Edit([Bind(Include = "Med_quan_typeId,Med_quan_type,Med_quantity")] Med_quantity_type med_quantity_type)
{
if (ModelState.IsValid)
{
db.Entry(med_quantity_type).State = EntityState.Modified;
await db.SaveChangesAsync();
return RedirectToAction("Index");
}
return PartialView(med_quantity_type);
}
If my model state fails the controller return partial view but its not popup in mymodel this is my partial view cshtml page
<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">Medicine Quantity Type - Edit</h4>
</div>
<div class="modal-body">
#using (Ajax.BeginForm("Edit", "MedQuantityType",
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "mymodel"
}))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true)
#Html.HiddenFor(model => model.Med_quan_typeId)
<div class="form-group">
<div class="col-md-3 col-md-offset-1">
#Html.LabelFor(model => model.Med_quan_type, new { #class = "control-label " })
</div>
<div class="col-md-6">
#Html.TextBoxFor(model => model.Med_quan_type, new { #class = "form-control", #id = "txtquantype" })
#Html.ValidationMessageFor(model => model.Med_quan_type)
</div>
</div>
<div class="form-group">
<div class="col-md-3 col-md-offset-1">
#Html.LabelFor(model => model.Med_quantity, new { #class = "control-label" })
</div>
<div class="col-md-6">
#Html.TextBoxFor(model => model.Med_quantity, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Med_quantity)
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" value="Save" class="btn btn-success" id="btnsubmit" />
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
<div ID ="popupform"class="popover">
<div class="alert-danger"> Please Fix The errors </div>
</div>
}
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
debugger;
// when the modal is closed
$('#mymodel').on('hidden.bs.modal', function () {
// remove the bs.modal data attribute from it
$(this).removeData('bs.modal');
// and empty the modal-content element
$('#mymodel .modal-content').empty();
});
});
});
</script >
Please help anyone how to popup partial view, once controller return partial view
From Task<ActionResult > to Task<PartialViewResult> then change your ActionLink to RenderPartial.
It should work fine.
Change the return type of your action to Task<PartialView>
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 ?