asp.net-mvc - MVC コントローラーで新しく挿入された ID を jQuery に取得する

Question

次のように、通常はコントローラー内でエンティティを更新しています:-

[HttpPost]
public ActionResult Create(Project project)
{
  //var model = new CompositeImageModel(0);
  if (ModelState.IsValid)
  {
    //var model = new CompositeImageModel(project.ProjectID);
    db.Projects.Add(project);
    db.SaveChanges();
    ViewBag.ProjectID = project.ProjectID;

    return RedirectToAction("Index");
  }

  return View();
}

そして、Jquery AJAXコード内でこの新しいID「ViewBag.ProjectID」を取得したいと思います:-

onSaveBegin: function () {
  //CODE FOR SAVE BEGIN    
  $('#imageList').fadeIn('slow');
  $("#imageList").click(function () { $("#imageList").load("/File/ImageUpload/222"); }); 

},

ハードコードされた「222」の代わりに。

どうすれば入手できますか？

あなたの助けと時間をありがとう

** * ** * ****更新* ** * ** * ** * ** * ** * ** * ** * ** * *** Jquery を次のように更新しました:-

<script type="text/javascript">
$(document).ready(function () {

    var imageList = $('#imageList'),
        submitButt = $('#submitButt');

    //hide the imageList initially
    imageList.hide(); //hide all but the first paragraph

    });


    var Project = {
        save: function () {
            var projectForm = $("#projectForm");
            if (projectForm.valid()) {
                projectForm.submit();
            }
            else {
                Project.onInvalidForm();
            }
        },
        onInvalidForm: function () {
            //CODE FOR INVALID FORM 
        },
        onSaveBegin: function () {
            //CODE FOR SAVE BEGIN    
            $('#imageList').fadeIn('slow');
        },
        onSaveSuccess: function () {
            //CODE FOR SAVE SUCCESS    
        },
        onSaveFailure: function () {
            //CODE FOR SAVE FAILURE    
            alert(ViewBag.ProjectID);
        },
        onSaveComplete: function () {
            //CODE FOR SAVE COMPLETE    
            //var hfProjectId = $("#hfProjectId").val();
            //$("#imageList").click(function () { $("#imageList").load("/File/ImageUpload/" + hfProjectId); });
            $("#imageList").click(function () { $("#imageList").load("/File/ImageUpload/"+@(ViewBag.ProjectID) ); }); 
        }
    };

ProjectID を取得する必要があるため、コードを onSaveComplete に移動しましたが、まだ取得できません。ただし、両方のオプションは機能しません。

** * ** * ****更新 2** * ** * ** * ** * ** * ** * ** * ** * ** *

@model MvcCommons.Models.Project

@{
ViewBag.Title = "Create";

}

<h2>Create</h2>

@{    
Layout = "~/Views/Shared/_Layout.cshtml";    
Html.EnableClientValidation();    
Html.EnableUnobtrusiveJavaScript();

}

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>

<script type="text/javascript">
        $(document).ready(function () {

    var imageList = $('#imageList'),
        submitButt = $('#submitButt');

        //hide the imageList initially
    imageList.hide(); //hide all but the first paragraph

    });


    var Project = {
        save: function () {
            var projectForm = $("#projectForm");
            if (projectForm.valid()) {
                projectForm.submit();
            }
            else {
                Project.onInvalidForm();
            }
        },
        onInvalidForm: function () {
            //CODE FOR INVALID FORM 
        },
        onSaveBegin: function () {
            //CODE FOR SAVE BEGIN    
            $('#imageList').fadeIn('slow');
        },
        onSaveSuccess: function () {
            //CODE FOR SAVE SUCCESS    
        },
        onSaveFailure: function () {
            //CODE FOR SAVE FAILURE    
            alert(ViewBag.ProjectID);
        },
        onSaveComplete: function () {
            //CODE FOR SAVE COMPLETE    
            //var hfProjectId = $("#hfProjectId").val();
            //$("#imageList").click(function () { $("#imageList").load("/File/ImageUpload/" + hfProjectId); });

            $("#imageList").click(function () { $("#imageList").load("/File/ImageUpload/"+@(ViewBag.ProjectID) ); }); 
        }
    };

@{ var projectID = int.Parse(ViewBag.ProjectID);
}

@using (Ajax.BeginForm(
"/Create",
new { },
new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "projectFormContainer",
OnComplete = "Project.onSaveComplete",
OnFailure = "Project.onSaveFailure", OnSuccess = " Project.onSaveSuccess", OnBegin = "Project.onSaveBegin"
},
new { id = "projectForm", name = "projectForm" }))
{

         @Html.Hidden("hfProjectId", ViewBag.ProjectID)

        <div class="editor-label">          
            @Html.LabelFor(m => m.ProjectTitle)       
         </div>       
         <div class="editor-field">          
            @Html.TextBoxFor(m => m.ProjectTitle)          
            @Html.ValidationMessageFor(m => m.ProjectTitle)       
         </div>       
         <div class="editor-label">          
            @Html.LabelFor(m => m.ProjectText)       
         </div>       
         <div class="editor-field">          
            @Html.TextBoxFor(m => m.ProjectText)          
            @Html.ValidationMessageFor(m => m.ProjectText)       
         </div>       
         <p>       
            <input type="submit" value="Submit" onclick="Project.save();" />       
         </p>    
      </div>    
}


<div id='imageList'>
    <h2>Upload Image(s)</h2>
    @{ 
        Html.RenderPartial("~/Views/File/ImageUpload.cshtml", new MvcCommons.ViewModels.ImageModel((int)ViewBag.ProjectID));
     }
</div>

@Html.ActionLink("リストに戻る", "索引")

最新の変更で更新されたコード

** * ** * ** * **更新* ** * ** * ** * ** * ** * ** * ** * ***

モードの更新:- @Html.Hidden をこれに変更します:-

            @if(Model != null)
        {
             @Html.Hidden("hfProjectId", Model.ProjectID)
        }

Javascriptはまだ同じです:=

            onSaveComplete: function () {
            //CODE FOR SAVE COMPLETE    
            var hfProjectId = $("#hfProjectId").val();
            alert(hfProjectId);
            $("#imageList").click(function () { $("#imageList").load("/File/ImageUpload/" + hfProjectId); });
            //$("#imageList").click(function () { $("#imageList").load("/File/ImageUpload/"+@(ViewBag.ProjectID) ); }); 
        }

var projectID を変更します

@{
if (Model != null)  
{
    var projectID = Model.ProjectID;
}

}

コントローラーで、モデルを使用して「ビュー」を返します

        [HttpPost]
    public ActionResult Create(Project project)
    {
        if (ModelState.IsValid)
        {
            db.Projects.Add(project);
            db.SaveChanges();
            ViewBag.ProjectID = project.ProjectID;
            //return RedirectToAction("Index");
            return View("Create", project);
        }

        return View();
    }

それでも運が悪い！

** * ** * ** * *最終更新* ** * ** * ** * ** * ** * ** * ** * ** * *** プロジェクトビューモデルを作成し、私の場合、ViewBagが機能していなかったため、変数を渡してみてください。そこで、コントローラーの HttpPost Create 関数を次のように変更しました。

        [HttpPost]
    public ActionResult Create(Project project)
    {
        ProjectModel viewModel = new ProjectModel();

        if (ModelState.IsValid)
        {
            db.Projects.Add(project);
            db.SaveChanges();
            viewModel.Project = project;
            return View("Index", viewModel);
        }

        return View();
    }

ただし、これでも ProjectID は更新されませんでした。そのため、当面はこれを放棄して、より良い設計を考え出すことにしました。ただし、私がやっていることが間違っていると思われる場合は、これについてコメントしてください。

これが私の最後の Create View です:-

@model MvcCommons.ViewModels.ProjectModel
@{
var projectID = Model.Project.ProjectID;

}

@{ ViewBag.Title = "作成"; }

作成

@{    
Layout = "~/Views/Shared/_Layout.cshtml";    
Html.EnableClientValidation();    
Html.EnableUnobtrusiveJavaScript();

}

`

` $(document).ready(function () {

    var imageList = $('#imageList'),
        submitButt = $('#submitButt');

    //hide the imageList initially
    imageList.hide(); //hide all but the first paragraph

    });

    var Project = {
        save: function () {
            var projectForm = $("#projectForm");
            if (projectForm.valid()) {
                projectForm.submit();
            }
            else {
                Project.onInvalidForm();
            }
        },
        onInvalidForm: function () {
            //CODE FOR INVALID FORM 
        },
        onSaveBegin: function () {
            //CODE FOR SAVE BEGIN    
            alert('onSaveBegin ' + @(projectID));
            $('#imageList').fadeIn('slow');
        },
        onSaveSuccess: function () {
            //CODE FOR SAVE SUCCESS    
            //alert('onSaveSuccess')
        },
        onSaveFailure: function () {
            //CODE FOR SAVE FAILURE    
            //alert('onSaveFailure ' + @(projectID));
        },
        onSaveComplete: function () {
            //CODE FOR SAVE COMPLETE    
            //alert('onSaveComplete ' + @(projectID))
            //$("#imageList").click(function () { $("#imageList").load("/File/ImageUpload/"+@(projectID)); });
            $("#imageList").click(function () { $("#imageList").load("/File/ImageUpload/" + hfProjectId); });
        }
    };

@using (Ajax.BeginForm(    
"/Create",    
new { },    
new AjaxOptions    
{       
    InsertionMode = InsertionMode.Replace,       
    UpdateTargetId = "projectFormContainer",       
    OnComplete = "Project.onSaveComplete",       
    OnFailure = "Project.onSaveFailure",
    OnSuccess = "Project.onSaveSuccess",
    OnBegin = "Project.onSaveBegin"    
},    
new { id = "projectForm", name = "projectForm" }))    
{    
    <div>       

        @*@Html.Hidden("hfProjectId", projectID)*@ 
        @Html.Hidden("hfProjectId", Model.Project.ProjectID) 

        <div class="editor-label">          
            @Html.LabelFor(m => m.Project.ProjectTitle)       
         </div>       
         <div class="editor-field">          
            @Html.TextBoxFor(m => m.Project.ProjectTitle)          
            @Html.ValidationMessageFor(m => m.Project.ProjectTitle)       
         </div>       
         <div class="editor-label">          
            @Html.LabelFor(m => m.Project.ProjectText)       
         </div>       
         <div class="editor-field">          
            @Html.TextBoxFor(m => m.Project.ProjectText)          
            @Html.ValidationMessageFor(m => m.Project.ProjectText)       
         </div>       
         <p>

@* *@

}

<div id='imageList'>
    <h2>Upload Image(s)</h2>
    @{ 
        //Html.RenderPartial("~/Views/File/ImageUpload.cshtml", new MvcCommons.ViewModels.ImageModel((int)ViewBag.ProjectID));
        Html.RenderPartial("~/Views/File/ImageUpload.cshtml", new MvcCommons.ViewModels.ImageModel(projectID));
     }
</div>

@Html.ActionLink("リストに戻る", "索引")

score 1 · Accepted Answer

簡単な方法（よくわかりません）

$("#imageList").click(function () { $("#imageList").load("/File/ImageUpload/"+@(ViewBag.ProjectID) ); });

通常の方法

1- ビュー内に HiddenField を配置します

2-値を取得しViewBag.ProjectID て、この非表示フィールドに割り当てます

3- jQuery で読み込んで、好きな場所で使用します。

例は、この回答にすぐに追加する必要があります。

例：

アップデート

//  Get the projectID value
    var projectID = int.parse(ViewBag.ProjectID);

// add a hiddenfield and set it's value to the projectID
@Html.Hidden("hfProjectId", projectID)

// inside your jQuery code, get the hiddenField value
var hfProjectId = $("#hfProjectId").val();

// use this value inside your code
$("#imageList").click(function () { $("#imageList").load("/File/ImageUpload/"+hfProjectId ); });

asp.net-mvc - MVC コントローラーで新しく挿入された ID を jQuery に取得する

作成

1 に答える 1

Related

Reference