We Keep Coding

How to create new form when clicking button in asp.net mvc or jquery?

I have a card and what i want to do, is when a user click(create course) button it must generate new content(asp.net mvc) or dashboard that is empty. I have some ideas around this. Let me share below;
<div class="row">
<div class="col-xs-3 ml-auto">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Start New Course
</button>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Start New Course</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-group">
<label for="CourseName" class="col-sm-2 col-form-label">CourseName:</label>
<div class="col-sm-6">
#Html.EditorFor(model => model.CourseName, new { htmlAttributes = new { #class = "form-control", autofocus = "autofocus", placeholder = "CourseName" } })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Create Course</button>
</div>
</div>
</div>
</div>
// Jquery
<a class="btn btn-large btn-success" id="fire" href="/Controller/Courses.chtml#">Create Courses</a>
$('#fire').on('click', function (e) {
// dont know what to put here....?
})
I dont know if my logic is wrong and need some ideas around. Meaning what i want when i click the create button from the modal form it must take me to the new content(asp.net mvc). Something along this line

Change the href value, replace the ActionResultName and ControllerName, see below:
<a class="btn btn-large btn-success" id="fire" href="#Url.Action("ActionResultName","ControllerName")">Create Courses</a>

Partial View Does not render correctly with dynamic id?

i am trying to render partial view(reusable) in order to delete customer with cus_id within table(list of Customers)
but every time i submit form only first row id is submitting please tell me correct solution.
#foreach (var item in Model)
{
....
<td>
#await Html.PartialAsync("~/Views/Shared/Modal.cshtml", item.cus_id)
#*<partial name="~/Views/Shared/Modal.cshtml" for="#item.cus_id"/>*#
</td>
}
Here is My View
#model int
<span>
<i class="fas fa-trash-alt" title="Delete"></i>
</span>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header ">
<h4 class="modal-title">Warning</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form asp-action="Delete" asp-route-id="#Model" method="post">
<span>
<span><b>Are you sure you want to delete?</b></span>
<button type="submit" class="btn btn-danger">Yes</button>
No
</span>
</form>
</div>
</div>
</div>
</div>

The problem is in your partial view.
<i class="fas fa-trash-alt" title="Delete"></i>
You used the id selector, it will always select the first modal which id is "myModel". While all the modals' ids are the same. So, every time you submit, only the first row id is submitting.
You can apply the cus_id to the modal id to distinguish which modal should be opened.
<span>
<i class="fas fa-trash-alt" title="Delete"></i>
</span>
<div id="myModal_#Model" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header ">
<h4 class="modal-title">Warning</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form asp-action="Delete" asp-route-id="#Model" method="post">
<span>
<span><b>Are you sure you want to delete #Model?</b></span>
<button type="submit" class="btn btn-danger">Yes</button>
No
</span>
</form>
</div>
</div>
</div>

tag helper asp-route- not working - Razor Pages (.Net Core 3 preview 5)

I am prety new to Razor Pages so maybe I am doing it just wrong.
I am using .Net Core 3 preview 5 and for some reason my asp-route parameter is not working.
I have the following button in my cshtml (index) page:
<form method="get" asp-page-handler="RetrieveData" asp-route-retrieveid="5">
<button class="btn btn-primary">Retrieve Data</button>
</form>
My code behind for this action:
public async Task<IActionResult> OnGetRetrieveData(int retrieveid)
{
// Do stuff
return Page();
}
Everytime I press the button the retrieveid parameter remains 0 (null):
My entire cshtml code:
#page "{handler?}"
#model IndexModel
#{
ViewData["Title"] = "Retrieve Data";
}
#section Scripts
{
<script type="text/javascript">
// Some jQuery
</script>
}
<div class="text-center">
<h1 class="display-4">Retrieve Data</h1>
</div>
#if (Model.ErrorMessage != null)
{
<div id="ErrorMsg" class="alert alert-info alert-dismissible fade show" role="alert">
#Model.ErrorMessage
<button type="button" class="accept-policy close" data-dismiss="alert" aria-label="Close" data-cookie-string="#Model.ErrorMessage">
<span aria-hidden="true">Sluiten</span>
</button>
</div>
}
<button id="getData" class="btn btn-primary" data-toggle="modal" data-target="#modalGetDataConfirm">
Get Data
</button>
<!-- Modal -->
<div id="modalGetDataConfirm" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Get Data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Do you want to retrieve the data</p>
</div>
<div class="modal-footer">
<form method="get" asp-page-handler="RetrieveData" asp-route-retrieveid="5">
<button class="btn btn-primary">Retrieve Data</button>
</form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<br />
#if (Model.DataModel != null)
{
// table with search and the retrieved data
var prevDisabled = !Model.DataModel.HasPreviousPage ? "disabled" : "";
var nextDisabled = !Model.DataModel.HasNextPage ? "disabled" : "";
<a asp-page-handler="LoadData"
asp-route-sortOrder="#Model.CurrentSort"
asp-route-pageIndex="#(Model.DataModel.PageIndex - 1)"
asp-route-currentFilter="#Model.CurrentFilter"
class="btn btn-default #prevDisabled">
Vorige
</a>
<a asp-page-handler="LoadData"
asp-route-sortOrder="#Model.CurrentSort"
asp-route-pageIndex="#(Model.DataModel.PageIndex + 1)"
asp-route-currentFilter="#Model.CurrentFilter"
class="btn btn-default #nextDisabled">
Volgende
</a>
}
The strange thing is that the asp-route values in the paging <a> element IS working..

You need to add the parameter to the route template:
#page "{handler?}/{id?}"
#model IndexModel
#{
ViewData["Title"] = "Retrieve Data";
}
...

MVC - Multiple Modals of Dynamyc Content?

I have a best practice question. I have a page with many chat rooms.
When you click on a chat room a modal prompts asking for a nickname and VIA post gets the information and takes you to the room.
The questions is, I have multiple rooms so I have one modal:
#using (Html.BeginForm("DebateV2", "Home", FormMethod.Post)){
#Html.AntiForgeryToken()
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content ">
<div class="modal-header modal-header-primary">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="modalTitle">
<span class="glyphicon glyphicon-lock pull-left"></span> #Resources.IngresoALaGrieta
</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="Nickname"><span class="glyphicon glyphicon-user"></span> #Resources.ElejiNombre</label>
<input type="text" class="form-control" id="Nickname" name="Nickname" placeholder="#Resources.ElejiNick">
</div>
<input type="hidden" id="Debate" name="Debate" />
<input type="hidden" id="Team" name="Team" />
<button type="submit" id="connect" disabled="disabled" class="btn btn-success btn-block"><span class="glyphicon glyphicon-fire"></span> #Resources.Entrar</button>
</form>
</div>
</div>
</div>
</div>
}
And when the button is clicked it appends some information about the chatroom to the modal form, like this:
$('.open-modal')
.each(function() {
var $this = $(this);
$this.on("click",
function() {
$("#Debate").val($(this).data('debate'));
$("#Team").val($(this).data('team'));
$("#modalTitle").val($(this).data('titulo'));
$('#myModal').modal('show');
});
});
Now I want to send some information via QUERYSTRING so I have in the browser address the name of the room like this:
www.debates.com/debate?debate=debate-name
what is the best practice to do that? I am really lost.

Jquery modal not resizing

Ok,
I have a Jquery DataTable, which has a click event on the first column. The click event, calls a function which in turns calls a C# Webmethod to retrieve data to populate within the dialog.
My problem is that I can't seem to get the modal to resize. I use the followin settings, but it makes no difference.
$('#myModal').modal(resizable:true);
this is called at the end of the Function. The Method contains sensistive information, so i can't post it's contents, but the frame of the calls are as follows:
"fnRowCallback": function (nRow, aoData, iDisplayIndex, iDisplayIndexFull) {
if (aoData[11] == 'Duplicate' || aoData[11] == 'Duplicate approved') {
$('td:eq(0)', nRow).html('<a class="Main" onclick="ViewDuplicateDetails
(\'' + aoData[12] + '\', \'' + aoData[4] + '\',\'' + aoData[0] + '\');">' + aoData[0] + '</a>');
function ViewDuplicateDetail(param1, param2, param3, param4)
{
AJAX call code to retrieve the data
success:
append results to the HTML elements of my dialog (div)
$('#myModal').modal(resizable:true);
}
I dont get the handles to resize, and when the site is display on a screen where the resolution is not high, then the bottom of the modal isn't visible.
EDIT
I've included the actually modal, incase there is anything glaringly obvious.
<div id="myModal" class="modal hide fade" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 id="ticket-id">Message: <span id="messageRef"></span><span
id="messageType"></span>
<span id="checkrecord"></span>
<span id="Id"></span>
</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs" id="ticket-tabs">
<li>Record</li>
<li>Found</li>
<li>Comments</li>
<li>Audit</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab5">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>
<div class="tab-pane" id="tab6">
<div id="results"></div>
</div>
<div class="tab-pane" id="tab7">
<textarea id="txtComments"></textarea>
</div>
<div class="tab-pane" id="tab8">
<div id="audit"></div>
</div>
</div>
</div>
<div class="modal-footer">
<span id="txtWarning" style="float:left; color:#ff0000">You must
enter a comment before saving!</span>
<button id="btnComplete" class="btn btn-danger">Complete</button>
<button id="btnApprove" class="btn btn-primary">Approve</button>
<button id="btnSave" class="btn btn-primary">Save</button>
<button id="btnConfirmComplete" class="btn btn-danger">Confirm
Completion</button>
<div id="dowJones" style="text-align:left;">
<img src="Media/images/img2.png" width="94" height="20"
alt=""/><br />
</div>
</div>
</div>

I believe you need:
$('#myModal').modal({resizable:true});

resizable is not a native option of Bootstrap's modals.
If you want to use jQuery-ui resizable widget, you should initialize it using an explicit call :
$(function(){
$('#modal').resizable({ /*resizable options*/ })
});
See resizable examples and api doc.
If you want to have the initial dialog fit into the screen, you should add some code to check whether the dialogue fits when opened ( $('#modal').on('shown', function(){ ... }) ), by checking the dialog's dimensions against the viewport dimensions, and adjust it if the dialog falls outside.

may be this help:
$('#myModal').modal(...).resize(function(){/*code on resizing*/});
UPDATE
try set size for #myModal or it part in css in percent