JavaScript - 選択したドロップダウン文字列値をビュー内のテーブルからコントローラーに渡します
私は ASP.NET Core Web アプリケーションに取り組んでおり、ビューにすべてのリクエストを表示するテーブルがあります。各レコードのドロップダウンには、データベースからすべてのアナリストが正常に入力されました。そのため、マネージャーはドロップダウンからアナリストを割り当て、リクエストを承認できます。
私の質問:
JavaScript を使用する代わりに、レコードごとにフォームを使用してこれを実装できますか?
これを JavaScript を使用して実行する必要がある場合、これを実装する試みを次に示します。 次のコードは、アナリスト ID が整数の場合にのみ機能しますが、私の場合はアナリスト ID が文字列であるため、これを実行しようとすると常に「null」または「null」が返されます。または「ゼロ」コントローラーのアナリスト ID の場合。これが私の ViewModel です
public class RequestViewModel
{
public IEnumerable<Request> Requests { get; set; }
public IEnumerable<ApplicationUser> AnalystList { get; set; }
public Institution Institution { get; set; }
public string selectedAnalyst { get; set; }
}
これが私のコントローラーです
public async Task<IActionResult> ApproveRequest(int id, int Analystid)
{
Request Req = await _db.Request
.Include(c => c.Institution)
.FirstOrDefaultAsync(c => c.Id == id);
if (Req.Type == SD.TypeRegister)
{
Req.Institution.Status = SD.StatusApproved;
Req.Institution.ApprovalDate = DateTime.Now;
Req.Institution.Seats = Req.Seats; // new
Req.Institution.AnalystId = Analystid.ToString(); //Here I want to get the id as string
}
else if (Req.Type == SD.TypeSeat)
{
Req.Institution.Seats += Req.Seats;
}
else if (Req.Type == SD.TypeSubscription)
{
Req.Institution.Seats = Req.Seats;
Req.Institution.Status = SD.StatusApproved;
Req.Institution.ApprovalDate = DateTime.Now;
}
Req.isDone = true;
await _db.SaveChangesAsync();
return await CreateApproval(id, SD.StatusApproved);
}
これが私の見解です
@model TestApplication.Models.ViewModels.RequestViewModel
@using TestApplication.Extensions
@{
ViewData["Title"] = "Index";
}
<div class="tab-pane fade show active" id="Register" role="tabpanel" aria-labelledby="Register-tab">
Registration Requests
<div>
@if (Model.Requests.Count() > 0)
{
<table class="table table-striped">
<tr class="table-secondary">
<th>
Institution Name
</th>
<th>
Date
</th>
<th>
Actual seat
</th>
<th>
Seats
</th>
<th>
New Seat
</th>
<th>
Choose Analyst
</th>
<th>
Accept / Reject
</th>
<th>
Details
</th>
<th>
</th>
</tr>
@foreach (var item in Model.Requests)
{
@if (item.Type == "Register" && item.Institution.Status == "Pending") @*need one*@
{
<tr>
<td>
@Html.DisplayFor(m => item.Institution.Name)
</td>
<td>
@Html.DisplayFor(m => item.Date)
</td>
<td>
@Html.DisplayFor(m => item.Institution.Seats)
</td>
<td>
@Html.DisplayFor(m => item.ActualSeats)
</td>
<td>
@Html.DisplayFor(m => item.Seats)
</td>
<td>
<select id="[email protected]" asp-for="selectedAnalyst" asp-items=" Model.AnalystList.ToSelectListItem(Model.selectedAnalyst)" class="form-control">
<option selected value="">--- Choose ---</option>
</select>
</td>
<td>
<a class="btn btn-info" asp-controller="Request" asp-action="ApproveRequest" asp-route-id="@item.Id"> accept </a>
<a class="btn btn-info" asp-controller="Request" asp-action="RejectRequest" asp-route-id="@item.Id"> Reject </a>
</td>
<td>
<button type="submit" class="btn btn-success anchorDetail" data-target="#[email protected]" data-toggle="modal">
View Details
</button>
</td>
<td>
<div class="modal fade" id="[email protected]" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog-centered modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-success text-light justify-content-center">
<h5 class="modal-title">Request Details</h5>
</div>
<div class="modal-body justify-content-center" id="MyModalContent">
@await Html.PartialAsync("_RequestDetails", item)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
</div>
</div>
</div>
</div>
</td>
</tr>
}
}
</table>
}
else
{
<p>No Institutions Exists...</p>
}
</div>
</div>
@section scripts
{
<script>
function accept(id) {
var aid = $('#selectedAnalyst_' + id).val()
location.href = "/Request/ApproveRequest?id=" + id + "&Analystid=" + aid
}
var PostBackURL = '/Request/RequestDetails';
$(function () {
$(".anchorDetail").click(function () {
var $buttonClicked = $(this);
var id = $buttonClicked.attr('data-id');
$.ajax({
type: "GET",
url: PostBackURL,
contentType: "application/json; charset=utf-8",
data: { "Id": id },
cache: false,
datatype: "json",
success: function (data) {
$('#MyModalContent').html(data);
$('#myModal').modal('show');
},
error: function () {
alert("Dynamic content load failed.");
}
});
})
</script>
}
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div id='MyModalContent'></div>
</div>
------------------------
フォームを使用して @item.id と $('#selectedAnalyst_' + id).val() をコントローラーに渡したい場合は、次のようにできます。これは動作するデモです (フォームをドロップダウンリストとボタンの外に置きます) :
<form method="post"
asp-controller="Request"
asp-action="ApproveRequest"
asp-route-id="@item.Id">
<td>
<select id="[email protected]" asp-for="selectedAnalyst" class="form-control">
<option selected value="">--- Choose ---</option>
<option selected value="1">1</option>
<option selected value="2">2</option>
<option selected value="3">3</option>
</select>
</td>
<td>
<button type="submit">Accept</button>
</td>
</form>
コントローラー (Analystid を selectedAnalyst に変更して、asp-for="selectedAnalyst" をバインドできるようにします。また、文字列パラメーターを取得したい場合は、それを文字列 selectedAnalyst に変更できます):
public IActionResult ApproveRequest(int id,string selectedAnalyst)
{
return Ok();
}
結果:
新着記事:
java - XXE 億笑い攻撃は、XXE 攻撃を防ぐために Sonar が推奨するソリューションによって期待どおりに軽減されないようですJavaScript - errormessage または successmessage がクラスを親に追加するときのパセリsql - GROUP BY を使用した後の MAX 値を持つ行の検索haskell - なぜジェネリック関数はリストヘッドを特別な方法で処理するのでしょうか?Rust でマッチ内のエラーを処理するにはどうすればよいですか?.net - Nuget 接続試行が失敗しました「ソースのサービス インデックスをロードできません」pandas - SQL における df.pivot_table の自動ワイド列生成と同等SQL - Hive : 失敗: SemanticException 列が複数のテーブル/サブクエリで見つかりましたjavascript - Google Apps Script: MailApp.sendEmail() は TEXT ファイルと HTML ファイル以外は送信できません。html - jQuery マスク プラグインの文字をマイナス記号に変更するandroid - AltBeacon が eddystone デバイスを認識しないflutter - 2 つのテキストフィールドを常に揃えるようにする