Question

我使用asp.net-mvc处理项目jquery。我在jquery中创建了一个表partial view和表单（partial view）来输出详细信息。

当我选择一行时，他的详细信息将以表格形式打印，但我的表格视图会使所选行的视图返回到表格的开头。所选行仍然没有被选中。

我在所选行上尝试focus()但未成功。

以下是我的控制员的答案：

public ActionResult GetTransactionById(int idTrans) {
        MP_TRANSACTION trans = db.MP_TRANSACTION.FirstOrDefault(p => p.ID == idTrans);
        if (trans != null)
        {
            TransactionViewModel mvm = initWithoutArrayTransaction();

            mvm._Transaction = new Transaction
            {
                    ID = trans.ID,
                SENDER = trans.SENDER,
                RECEIVER = trans.RECEIVER,
                BASE_CURRENCY = trans.BASE_CURRENCY,
                FINAL_CURRENCY = trans.FINAL_CURRENCY,
                AMOUNT = trans.AMOUNT,
                RATE = trans.RATE,
                CREATION_DATE = trans.CREATION_DATE
            };
            return PartialView("TransactionDetail", mvm);
        }
        else
        {
            return Json(new { severity = "Important", message = "Error: Invalid Id Transaction" });
        }
    }

 private TransactionViewModel initWithoutArrayTransaction() {
        List<string> currency = (db.MP_CURRENCY.Select(s => s.CODE)).ToList<string>();     
        List<SelectListItem> codeList = TransformItemsInSelectListItem(currency);

        TransactionViewModel result = new TransactionViewModel
        {
            CurrencyList = new SelectList(codeList, "Value", "Text", ""),
            _Transaction = new Transaction { },
            ArrayTransaction = new List<MP_TRANSACTION>
            { }
        };
        return result;
    }

以下是带有视图的代码html的一部分：

<form id="formCash">
     @Html.Partial("TransactionDetail", Model)
</form>

<table id="cashTable">
     @Html.Partial("TableTransaction", Model)
</table>

＆＃13;

$(document).ready(function() {
  $("#cashTable tbody tr").on('click', function() {
    if ($('#cashTable tbody tr').hasClass('selectedRow')) {
      $('#cashTable tbody tr').removeClass('selectedRow');
    }
    $(this).addClass('selectedRow');
    //getTransactionById();
  });

});

/*function getTransactionById() {
$(tr).addClass('selectedRow');
$.ajax({
    url: "/.../GetTransactionById",
    cache: false,
    type: "GET",
    dataType: "html",
    data: {
        idTrans: idTrans
    }
}).done((data) => {
    $('#formCash').html(data);
})
.fail(function (jqXHR, textStatus, errorThrown) {
    console.log(errorThrown);
});*/

＆＃13;

table {
  width: 500px;
  cursor: pointer;
}

#cashTable thead {
  display: block;
}

#cashTable tbody {
  display: block;
  height: 5em;
  /* 5 times the equivalent of a text "size". */
  overflow-y: scroll;
}

#cashTable thead tr th:nth-child(1) {
  /* column 1 ! */
  width: 120px;
}

#cashTable thead tr th:nth-child(2) {
  /* column 2 */
  width: 120px;
}

#cashTable thead tr th:nth-child(3) {
  /* column 2 */
  width: 120px;
}

#cashTable thead tr th:nth-child(4) {
  /* column 2 */
  width: 120px;
}

#cashTable tbody tr:first-child td:nth-child(1) {
  /* column 1 ! */
  width: 120px;
}

#cashTable tbody tr:first-child td:nth-child(2) {
  /* column 2 */
  width: 120px;
}

#cashTable tbody tr:first-child td:nth-child(3) {
  /* column 2 */
  width: 120px;
}

#cashTable tbody tr:first-child td:nth-child(4) {
  /* column 2 */
  width: 120px;
}

.selectedRow {
  background-color: #522D25 !important;
  color: #fff;
}

th {
  font: bold 11px "Trebuchet MS";
  color: #F2EDEB;
  background: #522D25;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formCash">
  <label for="currencyBase">Base Currency</label>
  <input type="text" id="currency" />
  <br /><br />
  <label for="amount">Amount</label>
  <input type="number" id="amount" />
  <br /><br />
  <label for="rate">Exchange rate</label>
  <input type="number" id="rate" />
  <br /><br />
  <label for="name">Sender</label>
  <input type="text" id="name" />
  <br /><br />
  <label for="nameDest">Receiver</label>
  <input type="text" id="nameDest" />
  <br /><br />
  <label for="currencyFinal">Final Currency</label>
  <input type="text" id="currency" />
  <br /><br />
  <label for="time">Date</label>
  <input type="date" id="time" />
  <br /><br />
</form>

<table id="cashTable" border="1">
  <thead>
    <tr>
      <th>Sender</th>
      <th>Currency</th>
      <th>Amount</th>
      <th>Exchange Rate</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>JM Fillon</td>
      <td>USD</td>
      <td>123.5</td>
      <td>4.0876</td>
    </tr>
    <tr>
      <td>L OBAMA</td>
      <td>USD</td>
      <td>205</td>
      <td>4.0376</td>
    </tr>
    <tr>
      <td>V CAMERON</td>
      <td>EURO</td>
      <td>500</td>
      <td>3.0876</td>
    </tr>
    <tr>
      <td>C POUTINE</td>
      <td>XOF</td>
      <td>50</td>
      <td>4.3876</td>
    </tr>
    <tr>
      <td>P TRUDEAU</td>
      <td>USD</td>
      <td>300</td>
      <td>4.0876</td>
    </tr>
    <tr>
      <td>M TRUMP</td>
      <td>USD</td>
      <td>200</td>
      <td>4.086</td>
    </tr>
    <tr>
      <td>M CLINTON</td>
      <td>CAD</td>
      <td>100</td>
      <td>4.076</td>
    </tr>
    <tr>
      <td>M MACRON</td>
      <td>EURO</td>
      <td>123.5</td>
      <td>4.087</td>
    </tr>
    <tr>
      <td>M BERLUSCONI</td>
      <td>USD</td>
      <td>123.5</td>
      <td>4.087</td>
    </tr>
    <tr>
      <td>M gtgtg</td>
      <td>CAD</td>
      <td>123.5</td>
      <td>4.876</td>
    </tr>
    <tr>
      <td>M gyyy</td>
      <td>XOF</td>
      <td>123.5</td>
      <td>4.876</td>
    </tr>
  </tbody>
</table>

＆＃13;

我想如果我选择M BERLUSCONI的行，在表单中打印细节后，我的视图表保持在行Berlusconi。但实际上，它会向上滚动到表格的顶部。请帮忙。感谢。

表重点放在视图行jQuery / ASP.NET MVC上

0 个答案: