We Keep Coding

Submit through a Partial view

I have a Partial View as a Table, that will be refreshed with a Dropdown Selection in the Main View. This dropdown list includes company names. In the table below information matters pertaining to each company, and for each line of this information there is a drop-down list of all the functions that I can do with this line (like deleting or modifying the information) with a Pop-up Modal.
How can I call a Method in the main Model or Submit something? Or can I create a Partial View with Model in my Case?
Here is my Main View:
#page
#model Fachinformationsdienst_Kundenportal.Pages.Information_listModel
#{
}
<form>
<div class="form-row align-items-center">
<div class="form-group col-md-4">
<label for="inputState">Wählen Sie eine Unternehmen aus</label>
<select id="inputState" class="form-control">
#for (int i = 0; i < Model.companies.Count; i++)
{
<option>#Model.companies[i].FirmenKurzBezeichnung</option>
}
</select>
</div>
<div class="form-group col-md-6">
<input class="form-control" id="myInput" type="text" style="margin-top: 31px;" placeholder="Suche...">
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-primary" style="margin-top: 31px;">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</form>
<div id="fachinfoContainer">
<partial name="_FachinfoPartial" model="#Model.myViewModel" />
</div>
#section Scripts{
<script type="text/javascript">
$(function () {
$("#inputState").change(function () {
var selectcompany = "";
if ($(this).val() != "Wählen Sie die Firma aus...") {
selectcompany = $(this).val();
}
$.ajax({
url: "/Actions/Information-List?handler=fachinfoPartial",
type: "Get",
data: { company: selectcompany },
success: function (result) {
$("#fachinfoContainer").html(""); //clear the fachinfo container.
$("#fachinfoContainer").html(result); //populate the container.
},
error: function (result) {
alert(result);
}
});
});
});
</script>
}
Here is my Partial View
#model Fachinformationsdienst_Kundenportal.Models.MyViewModel
<table class="table table-striped" id="FachinfoTable">
<thead>
<tr>
<th scope="col">Nr.</th>
<th scope="col">Name</th>
<th scope="col">Status</th>
<th scope="col">Letzte Änderung</th>
<th scope="col">Aktuelle Version</th>
<th scope="col">Auftrag</th>
</tr>
</thead>
<tbody id="myTable">
#if (#Model.Fachinfos != null)
{
#for (int i = 0; i < #Model.Fachinfos.Count; i++)
{
<tr>
<th scope="row">#Model.Fachinfos[i].FachinfoNummer</th>
<td>#Model.Fachinfos[i].FachinfoName</td>
<td>#Model.Fachinfos[i].Status</td>
<td>#Model.Fachinfos[i].Datum</td>
<td>#Model.Fachinfos[i].PdfVersion</td>
<td>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
#for (int c = 0; c < #Model.SelectedCompany.Permissions.Count; c++)
{
if (Model.SelectedCompany.Permissions[c] != Models.Company.Permission.ERSTERFASSEN && Model.SelectedCompany.Permissions[c] != Models.Company.Permission.ABFRAGEN)
{
<a class="dropdown-item" data-toggle="modal" data-number="#Model.Fachinfos[i].FachinfoNummer" data-version="#Model.Fachinfos[i].PdfVersion" data-target="##Model.SelectedCompany.Permissions[c]">#Model.SelectedCompany.Permissions[c]</a>
}
}
</div>
</div>
</td>
</tr>
}
}
</tbody>
</table>
<!-- The Delete Modal -->
<div class="modal fade" id="#Models.Company.Permission.LOESCHEN">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Bestätigen</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<span id="deletMessege">Sind Sie sicher, dass Sie diese Fachinformation löschen möchten?</span>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button id="confirm" type="submit" class="btn btn-primary">Senden</button>
</div>
</div>
</div>
</div>
<script>
$('##Models.Company.Permission.LOESCHEN').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var fiNumber = button.data('number') // Extract info from data-* attributes
var modal = $(this)
modal.find('.modal-title').text('Fachinfonummer ' + fiNumber)
})
</script>
Here is my main model
using Fachinformationsdienst_Kundenportal.Classes;
using Fachinformationsdienst_Kundenportal.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;
namespace Fachinformationsdienst_Kundenportal.Pages
{
public class Information_listModel : PageModel
{
public List<Company> companies { get; set; }
public List<Fachinfo> fachinfos = new List<Fachinfo>();
public MyViewModel myViewModel = new MyViewModel();
public void OnGet()
{
companies = APIRequester.GetCompanies(User.Identity.Name);
foreach (var company in companies)
{
fachinfos.AddRange(APIRequester.GetFachinfos(company.FirmenKurzBezeichnung));
}
}
public PartialViewResult OnGetFachinfoPartial(string company)
{
//based on the selctedcompany to filter data, then return to the partial view.
companies = APIRequester.GetCompanies(User.Identity.Name);
myViewModel = new MyViewModel()
{
SelectedCompany = companies.Find(r => r.FirmenKurzBezeichnung == company), //get the company object here
Fachinfos = APIRequester.GetFachinfos(company)
};
return Partial("_FachinfoPartial", myViewModel);
}
//Submit this Method from Partial view
public IActionResult onDelete(string fiNumber)
{
return Page();
}
}
}

You can use JQUERY AJAX calls for this
$.ajax({
type: "POST",
url: '/Information_listModel?handler=Ondelete',
contentType: "application/json; charset=utf-8",
dataType: "json"
}).done(function (data) {
console.log(data.result);
})
your method should return type IActionResult

'result is not defined' post to controller with js

im trying to post to mvc.core controller textarea value & id value & im getting js error "result is not defined "
and the only data the controller getting the id value .
Razor:
<div class="well">
<div class="row">
<form asp-action="AddToSellList" method="post" class="form-horizontal shadow" style="padding: 10px;">
#foreach (var item in Model)
{
<div class="well well-sm" style="background-color: white;">
<div class=" row">
<div class="col-sm-10 pull-right text-right">
#* Prop *#
#foreach (var qestion in item.QAViewModel)
{
<div id="#item.Id" class="collapse" style="background-color: gray">
<p>Qestion</p>
#* Prop *#
#foreach (var ansewr in qestion.Answers)
{
#* Prop *#
}
</div>
}
</div>
<div class="col-sm-2">
<button class="btnShowModal btn btn-primary btnWhiteSpace" id="#item.Id" type="button" value="#item.Id">
#item.Id
<i class="fas fa-info-circle" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="##item.Id"> <i class="fas fa-question-circle" aria-hidden="true"></i>Bla bla </button>
</div>
</div>
</div>
//Check box for selecting items for Action AddToSellList
<input type="checkbox" name="Hiden" value="#item.Id"/>
}
<button type="submit" id="btt"> submit to Action AddToSellList</button>
</form>
</div>
</div>
<div class="modal fade" tabindex="-1" id="loginModal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<i class="fas fa-window-close"></i>
</button>
<h4 class="modal-title">moder for posting for _AskQ </h4>
</div>
<div class="modal-body ">
<form asp-action="_AskQ" class="form-horizontal" style="padding: 10px; " method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" name="id" asp-for="#Model.First().SiteUserId" />
<div class="form-group">
<textarea name="Question" type="text" class="abc form-control text-right"id="a" required=""> </textarea>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4">Ask</button>
</div>
</form>
</div>
</div>
</div>
</div>
Js:`
<script type="text/javascript">
$(document).ready(function() {
$('.collapse').on('shown.bs.collapse',
function() {
$(".collapse").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".btnShowModal").click(function() {
$("#loginModal").modal('show');
var id = $(this).attr("id");
//$(".button4").click(function(e) {
// e.preventDefault();
$(".button4").click(function() {
url = '#Url.Action("_AskQ", "Bid")';
const value = $.trim($("textarea").val());
if (value === "") {
alert(value);
}
var data = {
Id: id,
value: value
};
console.log(id);
console.log(value);
$.ajax({
url: url,
data: data,
type: "POST"
}).done(function(result) {
$(id).html(result);
}).fail(function(x, s, e) {
alert("failed: " + s);
});
});
}
);
});
`
controller :
[HttpPost]
public IActionResult _AskQ(QAViewModel Vm)
{
if (!ModelState.IsValid)
{
return View(Vm);
}
var qustion = new QuoteQuestion
{
SiteUserId = _userManager.GetUserId(User),
QuoteId = Vm.Id,
Question = Vm.Question
};
_context.quoteQuestions.Add(qustion);
_context.SaveChanges();
if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
{
ViewBag.q = qustion.Question;
ViewBag.Id = qustion.QuoteId;
ViewBag.SiteUId = qustion.SiteUserId;
}
return RedirectToAction("Index");
}
public class QAViewModel
{
public int QuoteQuestionId { get; set; }
public int Id { get; set; }
public string Question { get; set; }
public string SiteUserId { get; set; }
public virtual IList<Answers> Answers { get; set; }
}
In the data after ajax call, I can see the Id value & the Value value, but it keep failing to actually post to the controller (Id value only).
I'm posting from ActionResult name :index to ActionResult name _AskQ

Try the following changes in your code ,pay attention to the passed data name should be consistent with the parameter in the action
$(".button4").click(function() {
const value = $.trim($("textarea").val());
if (value === "") {
alert(value);
}
var Vm = {
Id: id,
Question: value
};
console.log(id);
console.log(value);
$.ajax({
type: "POST",
url: "/Bid/_AskQ",
contentType: "application/json",
data: "json",
data: JSON.stringify(Vm),
success: function (result) {
$(id).html(result);
},
error: function (x, s, e) {
alert("failed: " + s);
}
});
});
Add the [FromBody] attribute on the parameter when passing the json type data
[HttpPost]
public IActionResult _AskQ([FromBody]QAViewModel Vm)
Then the return value of the _AskQ method should be the html json result that you want to render the place with the specify id .Make the modification according to your needs。

Call view with ajax javascript in ASP.NET MVC

I want to call Action to open up my Index View by Ajax Javascript, but it does not load target view. Before I use ajax I called action like this that work properly:
<a class="btn btn-orange" href="#Url.Action("Index", "Booking", new { area = "Portal" })">انتخاب</a>
But I need to call with javascript Ajax and when I transfer that to this :
<a class="btn btn-orange" onclick="Booking(#Json.Encode(item))">انتخاب</a>
I faced this problem that it does not load page.
This is my ajax code:
function Booking(obj) {
var schedulingViewModel = {
};
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
schedulingViewModel[key] = obj[key];
}
}
$.ajax({
url: '/Portal/Booking',
type: 'post',
data: schedulingViewModel,
success: function (data) {
alert('Data: ' + data);
},
error: function (request, error) {
alert("Request: " + JSON.stringify(request));
}
});
}
And this s my BookingController:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Tranship.ViewModel;
namespace Tranship.UI.Areas.Portal.Controllers
{
public class BookingController: Controller
{
[HttpPost]
public ActionResult Index(ScheduleViewModel schedulingViewModel)
{
return View("Index", schedulingViewModel);
}
}
}
This is my view with IEnumerable model that I want to send an Item of that to action:
#model IEnumerable<Tranship.ViewModel.ScheduleViewModel>
<div class="pg-search-form">
#foreach (var item in Model)
{
<div class="list-block main-block f-list-block dashboard-listing booking-listing">
<div class="list-content">
<table class="table table-hover">
<tbody>
<tr>
<td class="dash-list-icon booking-list-date">
<div class="b-date">
<h3>#item.DepartureDay</h3>
<p>#item.DepartureMonth</p>
</div>
</td>
<td class="dash-list-text booking-list-detail">
<h3>#item.Origin به #item.Destination</h3>
<ul class="list-unstyled booking-info">
<li>#item.DepartureDate<span>تاریخ رفت :</span></li>
<li>#item.ArrivalDate<span>تاریخ برگشت :</span></li>
<li>#item.Adult نفر<span>تعداد :</span></li>
</ul>
</td>
<td class="dash-list-btn">
<a class="btn btn-orange" onclick="BookingMethod(#Json.Encode(item))">انتخاب</a>
#*<button type="submit" class="btn btn-orange">انتخاب</button>*#
#*<a class="btn btn-orange" href="#Url.Action("Index", "Booking", new { area = "Portal" })">انتخاب</a>*#
<div id="price">#item.Price تومان</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end list-content -->
</div>
}
<div class="pages">
<ol class="pagination">
<li><span aria-hidden="true"><i class="fa fa-angle-left"></i></span></li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li><span aria-hidden="true"><i class="fa fa-angle-right"></i></span></li>
</ol>
</div>
<!-- end pages -->
</div>
In fact ajax return correct HTML but I couldn't find why it does not redirect to target view.

window.location() is used to redirect from one page to another page.
After Successful ajax request write that code.
$.ajax({
url: '/Portal/Booking',
type: 'post',
data: schedulingViewModel,
success: function (data) {
alert('Data: ' + data);
window.location = "/Booking/Index";
},
error: function (request, error) {
alert("Request: " + JSON.stringify(request));
}
});

Getting value from HTML form returns Null with REST

I am not able to get data from html form to my java rest method as parameter.
Here's my html and angular code:
var app=angular.module("myApp",[]);
app.controller("mycon",function($scope,$http){
console.log("entered here1");
$scope.test={};
$scope.add = function() {
console.log("entered here2");
var json=JSON.stringify($scope.test);
console.log($scope.test);
console.log(json);
$http.get("rest/xyz/role",
{
data:json
}
).success(function(data, status, headers, config) {
$scope.data = data;
}).error(function(data, status, headers, config) {
alert("error");
})
}});
<body ng-app="myApp" ng-controller="mycon">
<center>
<h2> Login Here! </h2>
<hr/>
<form >
<table>
<tr>
<td>Signum Id:</td>
<td><input type="text" ng-model="test.sig"/></td>
</tr>
<tr>
<button class="btn waves-effect waves-light" type="submit" ng-click="add()" name="action"> Submit <i class="material-icons right">send</i>
</tr>
</table>
</form>
</center>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
</body>
Rest code goes here:
#GET
#Path("/role")
#Consumes({ MediaType.APPLICATION_JSON})
//#Consumes("text/plain")
#Produces({ "application/json" })
public String list(String s) {
System.out.print("Entered here ");
System.out.print(s);
return null;
}
I want signum field from form to pass as parameter in rest method.
The output I am getting is null.

Use http.post:
$http.post("rest/xyz/role", {
data:json
} ...

Angular Js updating view in an event not working

I'm looking to build an book shelf application which add, removes, edits books shelf data using angular routing.
But when I try to prepopulate a record to edit it, I'm not able to get the prepopulated values.
I have tried to assign value using $scope.{model name}. but it is not working
App.js
var myApp = angular.module('myApp', []);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/viewBook',
{ template : '<div ng-controller="ViewBookController"> <h2>Books</h2> <table class="table table-bordered table-condensed"> <thead> <tr> <td>Name</td> <td>Category</td> <td>Price</td> <td>Actions</td> </tr> </thead> <tr ng-repeat ="book in books"> <td>{{book.name}}</td> <td>{{book.category}}</td> <td>{{book.price}}</td> <td><span class="glyphicon glyphicon-edit">Edit</span> | <span class="glyphicon glyphicon-trash">Delete</span> </td> </tr> </table> </div>',
controller : 'ViewBookController'}).
when('/addBook',
{ template : '<div ng-controller = "ViewBookController"> <form class="well"> <label>Name*</label> <input type="text" name="name" ng-model="addBook.name" /><br/> <label>Category*</label> <input type="text" name="email" ng-model="addBook.category" /><br/> <label>Price*</label> <input type="text" name="phone" ng-model="addBook.price" /><br/> <br/> <input type="hidden" ng-model="addBook.id"/> <button ng-click ="add(addBook)">Add </button> <button type="button" class="btn btn-danger"><a href="#/viewBook">Cancel</button> </form> </div> ',
controller : 'ViewBookController'}).
otherwise({redirectTo: '/viewBook'});
}]);
myApp.controller('ViewBookController', function($scope, ViewBookService) {
$scope.tempbook ="";
$scope.books = ViewBookService.list();
$scope.delete = function (id) {
ViewBookService.delete(id);
// if ($scope.addBook.id == id)
// $scope.addBook = {};
}
$scope.add = function() {
ViewBookService.save($scope.addBook);
$scope.addBook = {};
alert('book added successfully');
}
$scope.edit = function (addBook,id) {
//$scope.addbook = $scope.tempbook;
$scope.addBook= (angular.copy(ViewBookService.get(id)));
}
});
myApp.service('ViewBookService', function() {
//to create unique book id
var uid = 3;
//books array to hold list of all books
var books = [{
id : 0,
name : 'Java',
category : 'software',
price : 600,
},
{
id : 1,
name : 'Sherlock Holmes',
category : 'fiction',
price : 350,
},
{
id : 2,
name : 'Wings of Fire',
category : 'autobiography',
price : 250,
}];
//save method create a new book if doesnt exist else update the existing object
this.save = function(book) {
if(book.id == null) {
book.id =uid++;
books.push(book)
}
else {
for(i in books) {
if(books[i].id == book.id) {
books[i] ==book;
}
}
}
}
//simply search books list for given id and returns the book object if found
this.get = function(id) {
for(i in books) {
if( books[i].id == id) {
return books[i];
}
}
}
//iterate through books list and delete book if found
this.delete = function (id) {
for (i in books) {
if (books[i].id == id) {
books.splice(i, 1);
}
}
}
//simply returns the books list
this.list = function () {
return books;
}
});
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Hello AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div class="col">
<div class="col-md-3">
<ul class="nav">
<li> View Book </li>
<li> Add Book </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>