0

ここで非常に奇妙な問題に直面しています。アクション (ビュー) を呼び出しており、そこに 2 つのボタンがあります。同じ .cshtml ファイルに配置されている JavaScript には、これらのボタン用の個別のハンドルがあります。以下に示すコード：

@model fbpm.Models.UserDetail

@{
    ViewBag.Title = "My View"; }

<style type="text/css">
    #top 
    {
        width:360px;
        float: left;
        height:100px;
        border-left: 1px solid black;
        border-bottom: 1px solid black;        
    }
    #right
    {
        width:360px;
        float: left;
        height:100px;
        border-left: 1px solid black;
        border-right: 1px solid black;
        border-bottom: 1px solid black;             
    } </style>
    <div id="top" class="display-field">
    &nbsp;&nbsp;Name  &nbsp;&nbsp;  : @Html.DisplayFor(model => model.UserName)    
    <br />
    <br />
    <input id="userid" type="hidden" value = @Html.DisplayFor(model => model.UserID)></input>
    &nbsp;&nbsp;Address : @Html.DisplayFor(model => model.FullAddress) <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    @Html.DisplayFor(model => model.State) <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     @Html.DisplayFor(model => model.Country)    
     <br /> 
     <br /> 
    </div>
    <div id="top" class="display-field">
    &nbsp;&nbsp;PAN #  &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; : @Html.DisplayFor(model => model.PANNo)
    <br /><br />
    &nbsp;&nbsp;Booked Date&nbsp;&nbsp;: @Html.DisplayFor(model => model.BookedDate)
    <br />
    <br />
    <br />
    <br />
    </div>
    <div id="right" class="display-field">
    &nbsp;&nbsp; Booked Amount&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: &nbsp; INR &nbsp; @Html.DisplayFor(model => model.BookedAmount)
    <br /><br />
    &nbsp;&nbsp; Remaining Amount &nbsp; : &nbsp; INR &nbsp; 
    <label id="ramt"/>
    <br />
    <br />
    <br />
    <br />
    </div>
    <div id="display" style="clear:both;">
     <button type="button"style="width:150px" id="paysched" name="paysched" onclick="handleflat();">Payment Schedule</button>
     <button type="button" style="width:150px"  id="flat" name="flat" onclick="handleps();"> Flat </button>
    </div>
    <br />
    <div id="container" style="clear:both;"> Click on the above button to display Flat/Payment Schedule </div> <script type="text/javascript" language="javascript">
    $.get('@Url.Action("GetRamt", "Customer")?id=' + document.getElementById("userid").value,
        function (amount) {
            document.getElementById("ramt").innerHTML = amount;
        });
        function handleflat() {
            $.get('@Url.Action("GetFlat", "Customer")?id=' + document.getElementById("userid").value,
           function (viewResult) {
               $("#container").html(viewResult);
           });
        }
        function handleps() {
            $.get('@Url.Action("paysched", "Customer")?id=' + document.getElementById("userid").value,
        function (viewResult) {
            $("#container").html(viewResult);
        });
    } </script>

ただし、2 番目のボタン (支払いスケジュール) をクリックすると、フラット ボタン アクションが呼び出されます。そして、2番目のボタンをクリックし続けると、うまくいくことがあります! そして、それが機能したら、ウィンドウ内の他の領域をクリックすると、最初のボタンの関数が呼び出されます。

誰か助けてください。

*編集: 最初のボタンは常に強調表示されます。これが、最初のボタンの関数が常に呼び出される問題だと思います。私はこの動作をしたくありません*

EDIT2：その間、私はコードをいじっていて、ボタンをラジオボタンに変更しました！最初は両方のラジオ ボタンが選択されていませんでしたが、2 番目のボタンをクリックすると、2 番目のボタンが選択されます。さて、興味深い部分です=>結果ビューの任意の部分をクリックすると、最初のラジオボタンが選択されます!!! そして今、両方のラジオボタンがオンになっています!!! :(

* EDIT3: そして、両方のラジオ ボタンに同じ名前を付けました。ここで、結果 div の任意の部分をクリックすると、最初のラジオ ボタンが選択されます。*

DIV - CONTAINER の上にマウスを置くと、最初のボタンが強調表示され、それがそのボタンがクリックされる理由です。

よろしく、 ハリ

4

1 に答える 1

1

あなたのhtmlがいくつかのクリーンアップを使用できるという事実は別として:

<input id="userid" type="hidden" value = @Html.DisplayFor(model => model.UserID)></input>

なる:

@Html.HiddenFor(model => model.UserID)

また...nbsp;とりわけ。

そして、javascript は次のようになります。

$(function () {
    // get the user id
    var userId = $('#UserID').val();

    // get 'Remaining Amount' -> this should be included in your view model frankly speaking
    // getting it like this is not "ideal"
    $.get('@Url.Action("GetRamt", "Customer")?id = ' + userId, function (responseData) {
        $('#ramt').text(responseData);
    });

    // bind the button events
    $('#flat').click(function() {
        var flatUrl = '@Url.Action("GetFlat", "Customer")?id = ' + userId;
        getCustomerData(flatUrl);
    });

    $('#paysched').click(function () {
        var paySchedUrl = '@Url.Action("paysched", "Customer")?id = ' + userId;
        getCustomerData(paySchedUrl);
    });

    // handle the response from the server for the customer data
    var getCustomerData = function(url) {
        $.get(url, function(responseData) {
            $('#container').html(responseData);
        });
    };
});

これが役立つことを願っています。

于 2013-05-11T06:54:46.383 に答える