1

私は、ユーザーがチャレンジを作成して互いに競争できるようにする「チャレンジエンジン」Webアプリケーションに取り組んでいます。私はMVC4C＃、かみそりの構文を使用しています。

ユーザーがチャレンジを作成するか、既に作成したチャレンジの詳細を編集できるページを作成しようとしています。これを機能させたいのは、ユーザーが所有する課題のドロップダウンメニュー、送信ボタン、およびその下の2つのテキストフィールドを用意することです。ドロップダウンからチャレンジを選択すると、2つのテキストフィールドにチャレンジ名とチャレンジの説明が表示されます。これを実現する方法はわかりませんが、コントローラーに配置する必要のある追加のコードを何らかの方法で呼び出す必要があると思います（ただし、そうではないかもしれません）。JavaScript、jQuery、AJAXも必要になる場合がありますが、これらのテクノロジーについての私の理解はまだやや不安定です。誰かが助けてくれますか、それとも私を正しい方向に向けることができますか？私は過去数日間これを広範囲にグーグルで検索し、スタックオーバーフローを検索しましたが、できませんでした 私がやろうとしていることをかなりやっている人を見つけてください。以下は私がこれまでに持っている関連コードです。

チャレンジモデル：

public class ChallengeModel
{
    public int ChallengeId { get; set; }
    public String Name { get; set; }
    public String Description { get; set; }
}

チャレンジコントローラー：

public class ChallengeController
public ActionResult Index()
    //Note: UserService and Challenge Service are part of the service layer;
    //They simply encapsulate the methods in the various DAOs.
    {
        ViewBag.CurrentUserName = WebSecurity.CurrentUserName;
        ViewBag.CurrentUser = UserService.GetUserByName(ViewBag.CurrentUserName);
        ViewBag.OwnedChallenges =
            ChallengeService.GetActiveChallengesByParticipant(CurrentUser);

        return View();
    }

チャレンジビュー（index.cshtml）：

<div class="challengeOwner">
<em>Challenges you own:</em>
<select id="selectOwnedChallenges">

    <option>Create new challenge...</option>
@foreach (ChallengeModel Challenge in ViewBag.OwnedChallenges)
{
    <option id="@Challenge.ChallengeId"
    value="@Challenge.ChallengeId"
    onclick="  [[[INSERT CODE HERE THAT WILL POPULATE TEXT FIELDS
    WITH CHALLENGE NAME AND DESCRIPTION]]]  ">@Challenge.Name</option>
}


</select>
<input id="ChallengeName" type="text" name="Name"
    value="@selectedChallenge.Name"/><br />
<input id="ChallengeDescription" type="text" name="Description"
    value="@selectedChallenge.Description"/>
<input id="updateChallenge" type="button" value="Submit" />
</div>

ご覧のとおり、ドロップダウンで選択されたチャレンジを表すために変数@selectedChallengeを使用すると思いました。設定方法がわからないので、どうしたらいいのかわからないのではないかと思いますが、とりあえずそのままにしておいたほうがいいと思います。どんな助けでも大歓迎です。前もって感謝します！

4

2 に答える 2

4

データ属性を使用して、各オプションの名前と説明を保持できます。

<option value="@Challenge.ChallengeId"
        data-name="@Challenge.Name"
        data-description="@Challenge.Description">
        @Challenge.Name</option>

次に、jQueryを使用して、選択が変更されたときに入力フィールドを更新します。

// this runs when the DOM is finished loading http://api.jquery.com/ready/
$(document).ready(function() {

  // wire up the change handler http://api.jquery.com/change/
  $("#selectOwnedChallenges").change(function() {

    // get the selected option's data values http://api.jquery.com/data/
    var data = $("#selectOwnedChallenges option:selected").data();

    // set the inputs
    $("#ChallengeName").val(data.name);
    $("#ChallengeDescription").val(data.description);
  });
});
于 2012-11-14T21:53:20.787 に答える
0

これにはjavascriptを使用する必要があります。そのかなり簡単です。これが私が書いた簡単な関数で、必要なことを実行します。

<script type="text/javascript">

    function displaySelectedChallenge(name, description)
    {
        $("#ChallengeName").val(name);
        $("ChallengeDescription").val(description);
    }
</script>

次に、選択が行われた後にこの関数を呼び出します。

displaySelectedChallenge(@Challenge.Name, @Challenge.Description)
于 2012-11-14T21:53:53.673 に答える