We Keep Coding

I've created a modal component and that doesn't work

I'm new in coding with ASP.NET Core. I created a CRUD functions in my application and then i decided to change some rules like Create New do not navigate to another tab it will be navigated to a component modal. So I did the steps that it shown in a tutorial but I didn't get a result .
Here's the page :
This is the code in index.cshtml:
#model IEnumerable<PermissionManagement.MVC.Models.Segment>
#{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="PlaceHolderHere"></div>
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#addSegment" asp-action="_SegmentModelPartial" data-url="#Url.Action("Create")"> Create </button>
And this is the code wrote it in SegmentModelPartial:
#model Segment
<div class="modal fade" id="addSegment">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addSegmentLabel">Modal title</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
<span>x</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="SName" class="control-label">Nom</label>
<input asp-for="SName" class="form-control" />
<span asp-validation-for="SName" class="text-danger"></span>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group ">
<label asp-for="SRang" class="control-label">Rang</label>
<input asp-for="SRang" class="form-control" />
<span asp-validation-for="SRang" class="text-danger"></span>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal">Save changes</button>
</div>
</div>
</div>
</div>
This is my code in site.js:
$(function () {
var PlaceHolderElement = $('#PlaceHolderHere');
$('button[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
PlaceHolderElement.html(data);
PlaceHolderElement.find('.modal').modal('show');
})
})
PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var sendData = form.serialize();
$.post(actionUrl, sendData).done(function (data)){
PlaceHolderElement.find('.modal').modal('hide');
})
})
})
And finally this is the controller:
[HttpGet]
public IActionResult Create()
{
Segment seg = new Segment();
return PartialView("_SegmentModelPartial", seg);
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Segment segment)
{
_context.Add(segment);
await _context.SaveChangesAsync();
return PartialView("_SegmentModelPartial", segment);
}

Submitting a form from a partial view

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');
}

Partial view that does not use the ActionName that I specify

I am currently developing an application in C # with ASP.NET MVC and entity Framework.
I use a partialview to edit data, for example I have a list of "module" in table form, I can add a module, delete one or edit one.
To create a module I proceed as follows:
My view :
<asp:UpdatePanel ID="ModuleUpdatePanel" runat="server">
<ContentTemplate>
<!-- Modal -->
<asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />
<div class="modal fade" id="ModuleModal" tabindex="-1" role="dialog" aria-labelledby="ModuleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
#Html.Action("_CreateModule")
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
The controller's method returning the partialview inside my modal:
[Authorize]
public ActionResult _CreateModule()
{
ModuleViewModel ViewModel = new ModuleViewModel { };
return PartialView(ViewModel);
}
The partialview :
#using (Html.BeginForm("CreateModule", "Parametres", FormMethod.Post))
{
#model Lynx.ViewModels.ModuleViewModel
<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" id="ModuleModalLabel">
Ajouter un module
</h4>
</div>
<div class="modal-body">
<div class="form-group">
#Html.TextBoxFor(m => m.Module.Libelle_Module, new { #class = "form-control", #placeholder = "Libellé du module" })
#Html.ValidationMessageFor(m => m.Module.Libelle_Module)
</div>
<div class="form-group">
#Html.TextBoxFor(m => m.Module.Capacite_Max_Module, new { #class = "form-control", #placeholder = "Capacité max (Palettes/heure)" })
#Html.ValidationMessageFor(m => m.Module.Capacite_Max_Module)
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Annuler
</button>
<input type="submit" class="btn btn-success" value="Enregistrer" />
</div>
}
The controller's method adding the module:
[Authorize]
[ActionName("CreateModule")]
public void CreateModule(Modules module)
{
if (ModelState.IsValid)
{
if (Dal.GetModule(module.PK_Code_Module) == null)
{
Dal.AddModule(Dal.GetMaxIdModule() + 1, module.Libelle_Module, module.Capacite_Max_Module);
}
}
}
For this part, everything works. Where I have a problem is at the level of my module edition (I use the same process)
View :
<div class="modal-content">
#Html.Action("_EditModule", "Parametres", new { id = #module.PK_Code_Module })
</div>
The controller's method returning the partialview inside my modal:
[Authorize]
public ActionResult _EditModule(int Id)
{
Modules module = Dal.GetModule(Id);
return PartialView(module);
}
The PartialView :
#using (Html.BeginForm("EditModule", "Parametres", FormMethod.Post))
{
#model Lynx.Models.Modules
<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" id="EditModuleModalLabel">
Modifier un module
</h4>
</div>
<div class="modal-body">
<div>
<b>Id Module</b>
#Html.TextBoxFor(model => model.PK_Code_Module, new { #class = "form-control", #readonly = "readonly" })
</div>
<div>
<b>Libellé</b>
#Html.TextBoxFor(model => model.Libelle_Module, new { #class = "form-control" })
</div>
<div>
<b>Capacité max du module (colis/heure)</b>
#Html.TextBoxFor(model => model.Capacite_Max_Module, new { #class = "form-control" })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Annuler
</button>
<input type="submit" class="btn btn-success" value="Enregistrer" />
</div>
}
The controller's method Editing the module:
[Authorize]
[ActionName("EditModule")]
public void EditModule(Modules module)
{
if (Dal.GetModule(module.PK_Code_Module) != null)
{
Dal.UpdateModule(int.Parse(module.PK_Code_Module), module.Libelle_Module, module.Capacite_Max_Module);
}
String URL = HttpContext.Request.Url.AbsoluteUri;
string[] lines = Regex.Split(URL, "/");
if (lines[lines.Length - 1] == "Parametres")
{
Response.Redirect("Parametres");
}
else
{
Response.Redirect("Index");
}
}
Here my button "Enregistrer" does absolutely nothing ... As if he ignored my "Bginform"
Any ideas ?

Put [HttpPost] in the action on your controller. Like that:
[HttpPost]
[Authorize]
[ActionName("EditModule")]
public void EditModule(Modules module)
{
if (Dal.GetModule(module.PK_Code_Module) != null)
{
Dal.UpdateModule(int.Parse(module.PK_Code_Module), module.Libelle_Module, module.Capacite_Max_Module);
}
String URL = HttpContext.Request.Url.AbsoluteUri;
string[] lines = Regex.Split(URL, "/");
if (lines[lines.Length - 1] == "Parametres")
{
Response.Redirect("Parametres");
}
else
{
Response.Redirect("Index");
}
}

how to do a create partial view inside a edit view?

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
}

Ajax Request Returning Extra Div Layer

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>