Develop Reference

ASP.NET Core Partialview does not bind to the class with formserialize

I want to create a Quiz, add questions to the quiz, and add answers to the question. I bound all items with asp-for, serialize my form, and send it to the controller, but they don't bind.
My classes:
public class Answer
{
[Key]
public Guid Id { get; } = Guid.NewGuid();
public string Content { get; set; }
public Guid QuestionId { get; set; }
}
public class Question
{
[Key]
public Guid Id { get; } = Guid.NewGuid();
public string Content { get; set; }
public Guid QuizId { get; set; }
public ICollection<Answer> Answers { get; set; } = new List<Answer>() {
new Answer() { Content = "Answeeeer" },
new Answer() { Content = "Answeeeer2" },
new Answer() { Content = "Answeeeer3" }
};
}
public class Quiz
{
[Key]
public Guid Id { get; } = Guid.NewGuid();
public string Name { get; set; }
public ICollection<Question> Questions { get; set; } = new List<Question>() { };
}
Quiz view:
#model QuizIt_Tests.Entities.Quiz
#{
ViewData\["Title"\] = "Create";
}
\<h1\>Create\</h1\>
\<h4\>Quiz\</h4\>
\<hr /\>
\<div class="row"\>
\<div class="w-75"\>
\<form id="myform" asp-action="Create" method="post" class="p-3"\>
<div class="form-group">
<label asp-for="Name" class="control-label">Quiz Name</label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div id="questionRows" class="form-group w-100">
#Html.EditorFor(model => model.Questions)
<button type="button" id="AddQuestion" class="btn btn-primary mt-2">Add Question</button>
</div>
<div class="form-group mt-2">
input id="submitbutton" type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
\</div\>
\<div\>
\<a asp-action="Index"\>Back to List\</a\>
\</div\>
#section Scripts {
#{
await Html.RenderPartialAsync("\_ValidationScriptsPartial");
}
<script>
$("#submitbutton").click(function (e) {
e.preventDefault();
console.log("Serialized Data: ");
console.log($('#myform').serialize())
$.ajax({
async: true,
data: $('#myform').serialize(),
method: 'post',
url: "Quizes/AddQuestion",
success: function () {
}
});
});
$("#AddQuestion").click(function () {
console.log("Serialized Data: ");
console.log($('#myform').serialize())
console.log($('#questionRows').serialize())
$.ajax({
url: '#Url.Action("AddBlankQuestion", "Quizes")',
cache: false,
success: function (html) { $("#questionRows").append(html); },
error: function (xhr, status, error) {
console.log(xhr.responseText);
}
});
return false;
});
$("a.deleteRow").on("click", function () {
$(this).parents("div.editorRow:first").remove();
return false;
});
</script>
}
Question partial view:
#model QuizIt_Tests.Entities.Question
\<hr style="height: 4px; color: black;" /\>
\<div class="w-100 p-3 px-5 my-3"\>
<div class="form-group">
<label asp-for="Content" class="control-label">Question</label>
<input asp-for="Content" class="form-control" value="#Model.Content" />
<span asp-validation-for="Content" class="text-danger"></span>
</div>
<input type="hidden" asp-for="Id" class="form-control" value="#Model.Id" />
#{
var answerrowid = "answerRows" + #Model.Id;
var addanswerbtnid = "addAnswer" + #Model.Id;
}
<div id="#answerrowid" class="w-75">
#Html.EditorFor(model => model.Answers)
</div>
<button type="button" class="btn btn-primary" id="#addanswerbtnid">Add Answer</button>
\</div\>
<script>
console.log("##addanswerbtnid");
$("##addanswerbtnid").click(function () {
console.log("Add Answer clicked");
$.ajax({
url: '#Url.Action("AddBlankAnswer", "Quizes")',
cache: false,
success: function (html) {
$("##answerrowid").append(html);
},
error: function (xhr, status, error) {
console.log(xhr.responseText);
}
});
return false;
});
</script>
Answer partial view:
#model QuizIt_Tests.Entities.Answer
\<div class="row" style="margin: 20px;"\>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Content" class="control-label">Answer Content</label>
<input asp-for="Content" class="form-control" value="#Model.Content" />
<span asp-validation-for="Content" class="text-danger"></span>
</div>
<input type="hidden" asp-for="Id" class="form-control" value="#Model.Id" />
\</div\>
This is my controller:
public class QuizesController : Controller
{
private readonly ApplicationDBContext _context;
public QuizesController(ApplicationDBContext context)
{
_context = context;
}
public async Task<IActionResult> Index()
{
return View(await _context.Quizzes.ToListAsync());
}
public IActionResult Create()
{
var newquiz = new Quiz();
return View(newquiz);
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Quiz quiz)
{
if (ModelState.IsValid)
{
_context.Add(quiz);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(quiz);
}
public IActionResult AddBlankQuestion(Quiz model)
{
Question question = new Question();
//question.Answers.Add(new Answer() { QuestionId = question.Id, Content = "Salaaam Necesem" });
return PartialView("EditorTemplates/Question", question);
}
public IActionResult AddBlankAnswer(Question model)
{
var newanswer = new Answer() { QuestionId = model.Id, Content = String.Empty };
return PartialView("EditorTemplates/Answer", newanswer);
}
}
I want to create a Quiz, add questions to the quiz, and add answers to the question. I bound all items with asp-for, serialize my form, and send it to the controller, but they don't bind.

public ICollection Questions { get; set; }
You don't bind Content to your list ICollection<Question> Questions , so the Questions list is null.
You need to set name like name="Questions[0].Content" and name="Questions[1].Content".

Asp.net Core PartialView submits form unnecessarily

I want to create a Quiz website with Asp. I want to create Quiz, add questions to the quiz, and add answers to the question. Add question button adds a question, but the Addanswer button submits the form instead of adding an answer to the question.
My classes:
public class Answer
{
[Key]
public Guid Id { get; } = Guid.NewGuid();
public string Content { get; set; }
public Guid QuestionId { get; set; }
public class Question
{
[Key]
public Guid Id { get; } = Guid.NewGuid();
public string Content { get; set; }
public Guid QuizId { get; set; }
public ICollection<Answer> Answers { get; set; } = new List<Answer>() {
new Answer() { Content = "Answeeeer" },
new Answer() { Content = "Answeeeer2" },
new Answer() { Content = "Answeeeer3" }
};
public class Quiz
{
[Key]
public Guid Id { get; } = Guid.NewGuid();
public string Name { get; set; }
public ICollection<Question> Questions { get; set; } = new List<Question>() { };
In front side I have Question and Answer Partial views:
Question Partial View:
#model QuizIt_Tests.Entities.Question
<hr style="height: 4px; color: black;" />
<div class="w-100 p-3 px-5 my-3">
<label asp-for="Content" class="control-label">Question</label>
<input asp-for="Content" class="form-control" value="#Model.Content" />
<span asp-validation-for="Content" class="text-danger"></span>
<div id="answerRows #Model.Id" class="w-75">
#Html.EditorFor(model => model.Answers)
<button class="btn btn-primary" id="addAnswer #Model.Id">Add Answer</button>
</div>
</div>
#section Scripts {
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="jquery-3.6.1.min.js"></script>
<script>
$("#addAnswer " + #Model.Id).click(function () {
console.log("clicked");
$.ajax({
url: '#Url.Action("AddBlankQuestion", "Quizes")',
cache: false,
success: function (html) {
$("#answerRows " + #Model.Id").append(html); },
error: function (xhr, status, error) {
console.log(xhr.responseText);
}
});
return false;
});
</script>
}
Answer Partial View:
#model QuizIt_Tests.Entities.Answer
<div class="row" style="background-color:red; margin: 20px;">
<label asp-for="Content" class="control-label">Answer Content</label>
<input asp-for="Content" class="form-control" value="#Model.Content" />
<span asp-validation-for="Content" class="text-danger"></span>
</div>
My Controller:
public class QuizesController : Controller
{
private readonly ApplicationDBContext _context;
public QuizesController(ApplicationDBContext context)
{
_context = context;
}
public IActionResult AddBlankQuestion(Quiz model)
{
Question question = new Question();
return PartialView("EditorTemplates/Question", question);
}
public IActionResult AddBlankAnswer(Question model)
{
return PartialView("EditorTemplates/Answer", new Answer() { QuestionId = model.Id });
}
}

You did not specify the type attribute in the button, which by default is equal to submit which causes the form to be submitted, to change its behavior, change the type value to button as follows.
<button type="button" class="btn btn-primary" id="addAnswer #Model.Id">Add Answer</button>

Ajax POST with ASP.NET Razor

I am developing an ASP.NET core Razor application and I have a form that I am posting, but I don't want the page to reload on submit. I read that this can be avoided by using Ajax, but i'm not sure how to implement this.
This is my form:
<form id="bankDropdown" method="post">
<div>
<label class="ratings-text" for="bank">Select Bank:</label>
<select name="BankOptions" class="form-control ratings-text" style="width:21%" id="bank">
#foreach (var bank in Model.BankLists)
{
<option name="BankOptions" value="#bank.ShortName" id="selection">#bank.ShortName</option>
}
</select>
</div>
<br />
<div>
<label>Enter Start Date:</label>
<input type="date" asp-for="DateSelect.DateMonthYear1" class="DateMonthYear" name="DateMonthYear1">
<i data-toggle="tooltip" title="Set to first day of the month for optimal results" class="far fa-question-circle"></i>
</div>
<br />
<div>
<label>Enter End Date:</label>
<input type="date" asp-for="DateSelect.DateMonthYear" class="DateMonthYear" name="DateMonthYear" required>
<i data-toggle="tooltip" title="Set to last or current day of the month for optimal results" class="far fa-question-circle"></i>
</div>
<br />
<div>
<input class="ratings-button" type="submit" value="Submit"/>
</div>
</form>
This is my POST function in my page model:
public IActionResult OnPost(string DateMonthYear, string DateMonthYear1, string BankOptions)
{
CurrentDate = string.Format(DateMonthYear);
SelectBank = BankOptions;
BankLists = ModelService.RunBankList();
TotalBankCollections = ModelService.RunTotalBankCollection1(DateMonthYear);
TotalTransactionCounts = ModelService.RunTotalTransactionCount1(DateMonthYear1, DateMonthYear);
long floatTotalCount = 0;
int intVolumeCount = 0;
string stringTotalVolume = "";
//get individual bank monthly collections
foreach (var collection in TotalBankCollections)
{
if (BankOptions == collection.ShortName)
{
string myBank = collection.TotalCollection;
BankCollection = Convert.ToDecimal(myBank).ToString("#,###,###.##");
}
}
//get total collections from all the banks
foreach (var collection in TotalBankCollections)
{
floatTotalCount += (long)Convert.ToDouble(collection.TotalCollection);
string stringTotalCount = Convert.ToDecimal(floatTotalCount).ToString("#,###,###.##");
TotalCollectionCount = stringTotalCount;
}
//get individual monthly volume collections
foreach (var collection in TotalTransactionCounts)
{
if (BankOptions == collection.ShortName)
{
string myBank = collection.TotalCount;
MonthlyVolumeCount = Convert.ToDecimal(myBank).ToString("#,##0");
}
}
//get total transactions of all banks
foreach (var collection in TotalTransactionCounts)
{
intVolumeCount += int.Parse(collection.TotalCount);
stringTotalVolume = intVolumeCount.ToString("#,##0");
TotalVolumeCount = stringTotalVolume;
}
return Page();
}
This is what I have so far, I have never used Ajax before and I have a project deadline:
$.ajax({
type: "POST",
url: "/Identity/Account/Ratings",
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function (response) {
alert(response);
},
failure: function (response) {
alert(response);
}
});
Thanks for the help.

If you want to use ajax with post method in razor page,here is a demo:
TestFormPost.cshtml(script):
$("#bankDropdown").on('submit', function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "",
data: $("#bankDropdown").serialize(),
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
success: function (data) {
}
});
})
TestFormPost.cshtml.cs:
public class TestFormPostModel : PageModel
{
[BindProperty]
public List<Bank> BankLists { get; set; }
[BindProperty]
public DateSelect DateSelect { get; set; }
public IActionResult OnGet()
{
BankLists = new List<Bank> {
new Bank{ ShortName="bank1"},
new Bank{ ShortName="bank2"},
new Bank{ ShortName="bank3"}
};
return Page();
}
public IActionResult OnPost(string DateMonthYear, string DateMonthYear1, string BankOptions) {
return Page();
}
}
public class Bank
{
public string ShortName { get; set; }
}
public class DateSelect
{
public string DateMonthYear { get; set; }
public string DateMonthYear1 { get; set; }
}
result:

you can prevent form submission by
$('form').on('submit',function(e){
e.preventDefault();
////then ajax call
})

How to pass data between views and controller?

This is our Home Index:
#model ELearning.Data.ELearningEgitimDTO
#{
ViewBag.Title = "Home Page";
}
<div class="jumbotron">
#if (TempData["message"] != null)
{
<div class="alert alert-info" role="alert">#TempData["message"]</div>
}
<div>
<div>
#if (Model.EgitimTuru == 5)
{
<h1>Yangın Eğitimi</h1>
}
<table class="table table-responsive">
<tr>
<td width="20%">Şirket Adı:</td>
<td width="80%">#Model.Name</td>
</tr>
<tr>
<td>Eğitimi Veren:</td>
<td>#Model.PersonelAdi</td>
</tr>
<tr>
<td>Eğitim Tarihi:</td>
<td>#Model.Tarih</td>
</tr>
</table>
</div>
<div>
<table class="table table-responsive">
<tr>
<td>Eğitim Konuları:</td>
</tr>
#foreach (var konu in Model.Adi)
{
<tr>
<td><ul><li>#konu</li></ul></td>
</tr>
}
</table>
</div>
</div>
<p class="text-right"><button onclick="getStartDate()" class="btn btn-primary btn-lg ">Eğitime Başla »</button></p>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function getStartDate() {
$.post("/Video/GetStartDate",
{
PerNr: #Model.PerNr,
StartDate: "",
EndDate: "",
EgitimFilesId: #Model.FileId
});
}
</script>
</div>
This is Video Index:
#model WebApplication3.Models.VideoLogsModel
#{
ViewBag.Title = "Video Page";
}
<div class="jumbotron">
<div>Eğitime başlanan zaman:</div>
<div id="startdate"></div>
<div class="col-md-12 text-center">
<video controls controlslist="nodownload" id="videoPlayer" width: 100% height: auto>
<source src="~/Video/GetVideo" type="video/mp4">
</video>
</div>
<br />
<div class="text-right">
<p id="button" onclick="egitimiBitir()" class="btn btn-danger btn-lg ">Eğitimi Bitir</p>
</div>
<script type="text/javascript">
var vid = document.getElementById("videoPlayer");
var button = document.getElementById("button");
if (vid.played) {
setInterval(function () { vid.pause(); }, 30000);
}
vid.addEventListener("ended", function() {
button.className = "btn btn-success btn-lg "
});
function egitimiBitir() {
if (vid.ended) {
$.post("/Video/GetEndDate",
{
PerNr: #Model.PerNr,
StartDate= "",
EndDate: "",
EgitimFile sId: #Model.EgitimFilesId
});
}
else {
document.getElementById("message").innerHTML = "Video tamamlanmadan eğitimi bitiremezsiniz.."
}
}
</script>
</div>
This is our main model:
public class ELearningEgitimDTO
{
public ELearningEgitimDTO() { }
public ELearningEgitimDTO(string PerNr, int ID)
{
this.ID = ID;
this.PerNr = PerNr;
}
public int ID { get; set; }
public string PerNr { get; set; }//katılımcıID
public string Name { get; set; }//şirket adı
public int EgitimTuru { get; set; }
public DateTime Tarih { get; set; }//egitim tarihi
public string PersonelAdi { get; set; } // eğitimi veren
public int FileId { get; set; }
public string FileName { get; set; }
public string[] Adi { get; set; }
}
This is our model:
public class VideoLogsModel
{
public int EgitimFilesId { get; set; }
public int PerNr { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
}
This is our Home Controller:
public class HomeController : Controller
{
public ActionResult Index(int EgitimId=4, string PerNr="2")
{
ELearningService service = new ELearningService();
ELearningEgitimDTO egitim = new ELearningEgitimDTO(PerNr, EgitimId);
return View(service.getInfo(egitim)); //eğitim bilgileri istenirken egitimId ve egitim kullanıcıdaki eğitmenin perNr si verilmeli!!
}
}
This is our Video Controller:
public class VideoController : Controller
{
public ActionResult Index(VideoLogsModel model)
{
return View(model);
}
public ActionResult GetVideo()
{
var memoryStream = new MemoryStream(System.IO.File.ReadAllBytes(#"C:\Users\cyare\Desktop\videoplayback.mp4"));
//byte[] bytes = System.IO.File.ReadAllBytes(#"C:\Users\melik.DESKTOP-LQQAB68\Desktop\videoplayback.mp4");
//System.IO.File.WriteAllBytes(#"C:\Users\melik.DESKTOP-LQQAB68\Desktop\videoplayback.mp4", bytes);
return new FileStreamResult(memoryStream, "video/mp4");
}
/* [HttpPost]
public ActionResult GetStartEndDate(VideoLogsModel logs)
{
DateTime startDate = logs.StartDate; //database de uygun tabloya yazılır
return RedirectToAction("Index", "Video");
}*/
[HttpPost]
public ActionResult GetStartDate(VideoLogsModel model)
{
model.StartDate = System.DateTime.Now;
ELearningDosyaKullaniciDTO user = new ELearningDosyaKullaniciDTO();
user.egitimFileID = model.EgitimFilesId;
user.egitimKullanıcı = model.PerNr;
user.startDate = model.StartDate;
ELearningService service = new ELearningService();
//service.CreateLogs(user);
//return RedirectToAction("Index","Video",model);*/
return RedirectToAction("Index", model);
}
[HttpPost]
public ActionResult GetEndDate(VideoLogsModel model)
{
model.EndDate = System.DateTime.Now;
ELearningDosyaKullaniciDTO user = new ELearningDosyaKullaniciDTO();
user.egitimFileID = model.EgitimFilesId;
user.egitimKullanıcı = model.PerNr;
user.endDate = model.EndDate;
ELearningService service = new ELearningService();
service.UpdateLogs(user);
TempData.Add("message", String.Format("Eğitiminiz Tamamlanmıştır!"));
return RedirectToAction("Index", "Home");
}
}
My question is how can i pass the model from home index to video controller and then to video index?
Video Index doesn't run. It goes to video index but then it runs home index again.
Also it runs egitimibitir() function before button's onclick function.

You send an ajax request to your service. (endpoint => GetEndDate) I think you can change your code like that,
$.ajax({
type: "POST",
url: "/Video/GetEndDate", //your reqeust url
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
// your data here
}),
success: function (data) {
// check state of data
// after check window.location = // redirect url
},
error: function (data) {
// handle exception
}
});
You can change your controller method to a data controller. (not an ActionResult. create a custom result object which include your data and your success state. you can use this custom result object every ajax requests for return state and data). If an exception occurs while executing "GetEndDate" method, you need to handle exception and you need to show it to client. You send exception or your success complete response to to client(view). (you can handle your exception data in ajax error: function)

next page with ajax and jquery in mvc

how to next page with ajax and jquery in mvc ?
I'm using the code below
#model DGM.Common.PageInput
#using System.Globalization
<link href="~/Content/themes/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<script>
function NextPage() {
//TODO
}
</script>
<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
<div class="scroll-content" style="display: inline-table">
#for (int i = 1; i < Model.CountPage + 1; i++)
{
string idParametr = Model.NameIdParametr;
short valueIdParametr = Model.ValueIdParametr;
var routeValueDictionary = new RouteValueDictionary
{
{idParametr, valueIdParametr},
{"countryNo", Model.CountryNo},
{"count", Model.CountRecordInPage},
{"page", i}
};
if (Model.IsSearch)
{
routeValueDictionary.Add("search", Model.TextSearch);
}
#Ajax.ActionLink(i.ToString(CultureInfo.InvariantCulture), Model.ActionName, Model.Controller,
routeValueDictionary,
new AjaxOptions
{
HttpMethod = "POST",
OnSuccess = "OnSuccess",
UpdateTargetId = "grid-list",
InsertionMode = InsertionMode.Replace
}, new Dictionary<string, object>
{
{"class", "scroll-content-item ui-widget-header"},
{"onclick", "clickfunc(this)"}
})
}
</div>
<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
<div class="scroll-bar"></div>
</div>
</div>
<div class="InfoPaging" style="margin: 0 auto; text-align: center;">
<a id="LastPage"href="javascript:void(0);" style="color: blue; padding: 0 10px">Last Page</a>
<a id="NextPage" onclick="NextPage()" href="javascript:void(0);" style="color: blue; padding: 0 10px">Next Page</a>
<a id="PreviousPage" href="javascript:void(0);" style="color: blue; padding: 0 10px">Previous Page</a>
<a id="FirsPpage" href="javascript:void(0);" style="color: blue; padding: 0 10px">First Page</a>
</div>
PageInput Class :
public class PageInput
{
public string ActionName { get; set; }
public string Controller { get; set; }
public int CountPage { get; set; }
public int AllRecord { get; set; }
public string NameIdParametr { get; set; }
public short ValueIdParametr { get; set; }
public decimal CountryNo { get; set; }
public int CountRecordInPage { get; set; }
public bool IsSearch { get; set; }
public string TextSearch { get; set; }
public int CurrentPage { get; set; }
}
I not have an idea for this work.I do not know what should I use.Whether from jQuery should I use?
I not have an idea for this work.I do not know what should I use.Whether from jQuery should I use?
update :
I've tried the following. But it always displays the second page
#{
idParametr = Model.NameIdParametr;
valueIdParametr = Model.ValueIdParametr;
routeValueDictionary = new RouteValueDictionary
{
{idParametr, valueIdParametr},
{"countryNo", Model.CountryNo},
{"count", Model.CountRecordInPage},
{"page", ++Model.CurrentPage}
};
if (Model.IsSearch)
{
routeValueDictionary.Add("search", Model.TextSearch);
}
}
#Ajax.ActionLink("Next Page", Model.ActionName, Model.Controller,
routeValueDictionary,
new AjaxOptions
{
HttpMethod = "POST",
OnSuccess = "OnSuccess",
UpdateTargetId = "grid-list",
InsertionMode = InsertionMode.Replace
})

i found :
Update Partial View :
function NextPage() {
var dataToSend = #Html.Raw(Json.Encode(Model));
dataToSend.CurrentPage = #Model.CurrentPage + 1;
$.ajax({
url: '#Url.Action("GetPageNumbers", "Class")',
data: dataToSend,
success: function(dataa) {
$('#PagingList').html(dataa);
$('#PagingListUp').html($('#PagingList').html());
}
});
}
use Action Link For Next Page :
#{
idParametr = Model.NameIdParametr;
valueIdParametr = Model.ValueIdParametr;
routeValueDictionary = new RouteValueDictionary
{
{idParametr, valueIdParametr},
{"countryNo", Model.CountryNo},
{"count", Model.CountRecordInPage},
{"page", Model.CurrentPage+1}
};
if (Model.IsSearch)
{
routeValueDictionary.Add("search", Model.TextSearch);
}
}
#Ajax.ActionLink("Next Page", Model.ActionName, Model.Controller,
routeValueDictionary,
new AjaxOptions
{
HttpMethod = "POST",
OnSuccess = "OnSuccess",
UpdateTargetId = "grid-list",
InsertionMode = InsertionMode.Replace
}, new Dictionary<string, object>
{
{"onclick", "NextPage()"}
})