asp.net - 操縱頁面內容

我想知道是否有人可以解釋如何操縱頁面各個部分的內容，具體取決於是否點擊一個按鈕。我認爲我正在尋找的是類似於包含在PHP中。我不確定asp.net是否有辦法做同樣的事（局部視圖？），或者如果bootstrap/jquery是要走的路。我已經包含了一個.png來說明我正在嘗試做什麼。asp.net - 操縱頁面內容

我希望b部分的內容根據部分A中選擇的按鈕進行更改。雖然不一定與此問題相關。但是，我希望部分B中的各種用戶輸入可以處理部分C中的現有內容。

來源

2016-05-04 LCaraway

有很多教程對部分視圖 - 這是你在MVC詢問的。 –

在你的控制，有一個動作那回歸納秒PartialView：

public PartialViewResult MyPartial(string someText) 
{ 
    var model = new MyPartialModel {SomeStuff = someText}; 
    return PartialView(model); 
}

創建模型和局部視圖，就像任何其他：

public class MyPartialModel 
{ 
    public string SomeStuff { get; set; } 
}

管窺：

@model ExampleApp.Models.MyPartialModel 

@Html.TextBoxFor(m => m.SomeStuff)

那麼你的頁面上，你可以在你的偏載通過jQuery與jQuery：

<div> 
    <button type="button" id="load-partial">Load The Partial!</button> 
</div> 

<div id="section-b"></div> 

@section Scripts{ 
    <script> 
     $(document).ready(function() { 
      $('#load-partial').click(function() { 
       $.get('MyPartial', { sometext: "Hello!" }).done(function (data) { 
        $('#section-b').html(data); 
       }); 
      }); 
     }); 

    </script> 
}

編輯回答評論： 如果您不想每次都在控制器中實例化新模型，則可以直接從視圖中傳遞模型（或多或少）。在你的控制器中，有一個非常簡單的動作，它接受一個模型作爲參數並返回部分視圖。請注意0屬性。

[HttpPost] 
public PartialViewResult MyPartial(MyPartialModel model) 
{   
    return PartialView(model); 
}

該模型的有不止一個屬性這個時候：

public class MyPartialModel 
{ 
    public string Name { get; set; } 
    public int Age { get; set; } 
}

的部分幾乎是一樣的，只不過它現在顯示的模型的新特性。

@model MVCPlayGround.Models.MyPartialModel 

@Html.TextBoxFor(m => m.Name) 
@Html.TextBoxFor(m => m.Age)

主頁/視圖中的jQuery是非常還差不多，但使用的不是GET POST。

// these could be anything, from control on the page, or whatever 
var name = "James"; 
var age = 30; 
$(document).ready(function() { 
    $('#load-partial').click(function() { 
     // note that Name and the Age are the names of the properties in our model 
     $.post('MyPartial', { Name: name, Age: age }).done(function (data) { 
      $('#section-b').html(data); 
     }); 
    }); 
});

這工作，因爲當通過POST發送的數據，它會被視爲表單數據，並在控制器的決定使用何種行動也將着眼於對動作的參數，並將它們與現有的表單數據。 MyPartialModel包含與表單數據匹配的屬性，因此它選擇該操作。還有其他微妙的規則，但基本上就是這樣。在幕後，它仍然會在控制器中實例化一個模型，它只是在框架中，而不是在你編寫的代碼中。

另一個編輯

剛走重新閱讀您的評論，我不認爲我已經完全回答它。如果要將您在局部視圖中所做的更改保存到主視圖中，請在主視圖中使用一些隱藏字段來保存此數據。

<input type="hidden" id="name-holder" /> 
<input type="hidden" id="age-holder" />

然後當你想存儲的值給他們，只需設置使用jQuery的值：

$('#some-save-button-maybe').click(function(){ 
    $('#name-holder').val($('id-of-name-on-partial').val()); 
    $('#age-holder').val($('id-of-age-on-partial').val()); 
});

當你點擊一個按鈕顯示的部分，相應的數據發送到控制器在部分渲染：

$('#load-partial').click(function() { 
    $.post('MyPartial', { Name: $('#name-holder').val(), Age: $('#age-holder').val() }).done(function (data) { 
     $('#section-b').html(data); 
    }); 
});

希望這是你需要什麼...

來源

2016-05-04 20:26:48 Erresen

有沒有辦法在部分視圖之間來回切換，而不必每次都創建模型的新實例？換句話說，保留部分視圖之外的模型中存儲的數據？我的第一個想法是將模型傳遞到實際視圖，然後從部分消耗，但似乎沒有工作。例如..我的模型有幾個布爾默認爲true。我希望用戶能夠切換這些。然後轉到下一個部分視圖。我現在看到的是，如果他們回到部分他們已經改變它返回到默認值。 – LCaraway

我會做一個編輯，希望能幫助你。 – Erresen

我剛剛從你的編輯中學到了很多東西。感謝你徹底。 – LCaraway

是的，在MVC局部視圖，並且它們通常是在項目的Views/Shared文件夾屬於並用_（即_MyPartial.cshtml的前綴。

由於@AdamHeeg在評論中指出，有一個在網絡上關於這種設置和許多不同的方式來實現你的目標。

這是我大概會如何解決它......

HTML

<nav> 
    @Html.ActionLink("Button 1", "GetSectionB") 
</nav> 

<section id="sectionB"> 
    <!-- Content here --> 
</section>

的JavaScript

$('nav a').on('click', function (e) { 
    e.preventDefault(); 

    $.get(this.href, function (html) { 
     $('#sectionB').html(html); 
    }); 
});

控制器

public PartialViewResult GetSectionB() 
{ 
    var vm = new MyViewModel(); 
    //do stuff 

    return PartialView("_SectionB", vm); 
}

來源

2016-05-04 20:26:41 zgood

asp.net - 操縱頁面內容

回答

相關問題