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 - 操纵页面内容

回答

相关问题